/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {color: #ffffff; font-size: 1em; line-height: 1.4; background: #171c25; letter-spacing: 0.05em;}
body {}
img {width: 100%; height: auto;}
a, button {text-decoration: none; transition: all 0.3s;}
a {color: rgba(0,150,240,1);}
a:hover {color: rgba(23,28,37,1);}
body.menu-open {overflow: hidden;}
figure {margin: 0; padding: 0;}
*{box-sizing: border-box;}

.header-main, .menu, .pricing, .signup, .mobile-menu, .mobile-button, .hero, .services, .work, .page-header, .contact, .fade, .footer, section, main {animation-name: main; animation-delay: 0.5s; animation-duration: 1s; animation-fill-mode: both;}

@keyframes main {
    0%   {transform: translate(0,0); opacity: 0;}
    100% {transform: translate(0,0); opacity: 1;}
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {background: #e5e5e5; text-shadow: none;}
::selection {background: #e5e5e5; text-shadow: none;}

/*
 * A better looking default horizontal rule
 */

hr {display: none;}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio, canvas, iframe, img, svg, video {vertical-align: middle;}

/*
 * Remove default fieldset styles.
 */

fieldset {border: 0; margin: 0; padding: 0;}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {resize: vertical;}

/* ==========================================================================
   Code
   ========================================================================== */

pre[class*="language-"] {width: 100%; position: relative; margin: 0; overflow: visible; padding: 0; border-radius: 0.25em;}
pre > code {border-radius: 0.25em;}
code {}
*:not(pre) > code {position: relative; padding: 0.2em; border-radius: 0.25em; color: #c92c2c; border: 1px solid rgba(0, 0, 0, 0.1); display: inline; white-space: pre-wrap;}

.hljs {display: block; overflow-x: auto; padding: .5em;}

/* *:not(pre)>code {font-style: normal!important; padding: 0.25em 0.5em; word-spacing: -.15em; background-color: #f2f2f2; -webkit-border-radius: 4px; border-radius: 4px; line-height: 1.45; text-rendering: optimizeSpeed;} */


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {display: none !important;}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active, .sr-only.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto;}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {visibility: hidden;}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {content: " "; /* 1 */ display: table; /* 2 */}
.clearfix:after {clear: both;}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {/* Style adjustments for viewports that meet the condition */}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* ==========================================================================
   Margin
   ========================================================================== */

.m-1 {margin: 1em;}
.m-2 {margin: 2em;}
.m-3 {margin: 3em;}
.m-4 {margin: 4em;}
.m-5 {margin: 5em;}

.mx-1 {margin-left: 1em; margin-right: 1em;}
.mx-2 {margin-left: 2em; margin-right: 2em;}
.mx-3 {margin-left: 3em; margin-right: 3em;}
.mx-4 {margin-left: 4em; margin-right: 4em;}
.mx-5 {margin-left: 5em; margin-right: 5em;}

.ml-1 {margin-left: 1em;}
.ml-2 {margin-left: 2em;}
.ml-3 {margin-left: 3em;}
.ml-4 {margin-left: 4em;}
.ml-5 {margin-left: 5em;}

.mr-1 {margin-right: 1em;}
.mr-2 {margin-right: 2em;}
.mr-3 {margin-right: 3em;}
.mr-4 {margin-right: 4em;}
.mr-5 {margin-right: 5em;}

.my-1 {margin-top: 1em;  margin-bottom: 1em;}
.my-2 {margin-top: 2em;  margin-bottom: 2em;}
.my-3 {margin-top: 3em;  margin-bottom: 3em;}
.my-4 {margin-top: 4em;  margin-bottom: 4em;}
.my-5 {margin-top: 5em;  margin-bottom: 5em;}

.mt-1 {margin-top: 1em;}
.mt-2 {margin-top: 2em;}
.mt-3 {margin-top: 3em;}
.mt-4 {margin-top: 4em;}
.mt-5 {margin-top: 5em;}

.mb-1 {margin-bottom: 1em;}
.mb-2 {margin-bottom: 2em;}
.mb-3 {margin-bottom: 3em;}
.mb-4 {margin-bottom: 4em;}
.mb-5 {margin-bottom: 5em;}

@media screen and (max-width: 900px) {
	.m-2 {margin: 1em;}
	.m-3 {margin: 1.5em;}
	.m-4 {margin: 2em;}
	.m-5 {margin: 3em;}

	.mx-2 {margin-left: 1em; margin-right: 1em;}
	.mx-3 {margin-left: 1.5em; margin-right: 1.5em;}
	.mx-4 {margin-left: 2em; margin-right: 2em;}
	.mx-5 {margin-left: 3em; margin-right: 3em;}

	.columns .mx-2 {margin-left: 2em; margin-right: 2em;}
	.columns .mx-3 {margin-left: 3em; margin-right: 3em;}
	.columns .mx-4 {margin-left: 4em; margin-right: 4em;}
	.columns .mx-5 {margin-left: 5em; margin-right: 5em;}

	.ml-2 {margin-left: 1em;}
	.ml-3 {margin-left: 1.5em;}
	.ml-4 {margin-left: 2em;}
	.ml-5 {margin-left: 3em;}

	.mr-2 {margin-right: 1em;}
	.mr-3 {margin-right: 1.5em;}
	.mr-4 {margin-right: 2em;}
	.mr-5 {margin-right: 3em;}

	.my-2 {margin-top: 1em; margin-bottom: 1em;}
	.my-3 {margin-top: 1.5em; margin-bottom: 1.5em;}
	.my-4 {margin-top: 2em; margin-bottom: 2em;}
	.my-5 {margin-top: 3em; margin-bottom: 3em;}

	.mt-2 {margin-top: 1em}
	.mt-3 {margin-top: 1.5em;}
	.mt-4 {margin-top: 2em;}
	.mt-5 {margin-top: 3em;}

	.columns .mt-2 {margin-top: 2em;}
	.columns .mt-3 {margin-top: 3em;}
	.columns .mt-4 {margin-top: 4em;}
	.columns .mt-5 {margin-top: 5em;}

	.mb-2 {margin-bottom: 1em;}
	.mb-3 {margin-bottom: 1.5em;}
	.mb-4 {margin-bottom: 2em;}
	.mb-5 {margin-bottom: 3em;}
}


/* ==========================================================================
   Padding
   ========================================================================== */

.p-1 {padding: 1em;}
.p-2 {padding: 2em;}
.p-3 {padding: 3em;}
.p-4 {padding: 4em;}
.p-5 {padding: 5em;}

.px-1 {padding-left: 1em; padding-right: 1em;}
.px-2 {padding-left: 2em; padding-right: 2em;}
.px-3 {padding-left: 3em; padding-right: 3em;}
.px-4 {padding-left: 4em; padding-right: 4em;}
.px-5 {padding-left: 5em; padding-right: 5em;}

.pl-1 {padding-left: 1em;}
.pl-2 {padding-left: 2em;}
.pl-3 {padding-left: 3em;}
.pl-4 {padding-left: 4em;}
.pl-5 {padding-left: 5em;}

.pr-1 {padding-right: 1em;}
.pr-2 {padding-right: 2em;}
.pr-3 {padding-right: 3em;}
.pr-4 {padding-right: 4em;}
.pr-5 {padding-right: 5em;}

.py-1 {padding-top: 1em; padding-bottom: 1em;}
.py-2 {padding-top: 2em; padding-bottom: 2em;}
.py-3 {padding-top: 3em; padding-bottom: 3em;}
.py-4 {padding-top: 4em; padding-bottom: 4em;}
.py-5 {padding-top: 5em; padding-bottom: 5em;}

.pt-1 {padding-top: 1em;}
.pt-2 {padding-top: 2em;}
.pt-3 {padding-top: 3em;}
.pt-4 {padding-top: 4em;}
.pt-5 {padding-top: 5em;}

.pb-1 {padding-bottom: 1em;}
.pb-2 {padding-bottom: 2em;}
.pb-3 {padding-bottom: 3em;}
.pb-4 {padding-bottom: 4em;}
.pb-5 {padding-bottom: 5em;}

@media screen and (max-width: 900px) {
	.p-2 {padding: 1em;}
	.p-3 {padding: 1.5em;}
	.p-4 {padding: 2em;}
	.p-5 {padding: 3em;}

	.integrations .p-2 {padding: 2em;}
	.integrations .p-3 {padding: 3em;}
	.integrations .p-4 {padding: 4em;}
	.integrations .p-5 {padding: 5em;}

	.support .p-2 {padding: 2em;}
	.support .p-3 {padding: 3em;}
	.support .p-4 {padding: 4em;}
	.support .p-5 {padding: 5em;}

	.px-2 {padding-left: 1em; padding-right: 1em;}
	.px-3 {padding-left: 1.5em; padding-right: 1.5em;}
	.px-4 {padding-left: 2em; padding-right: 2em;}
	.px-5 {padding-left: 3em; padding-right: 3em;}

	.columns .px-2 {padding-left: 2em; padding-right: 2em;}
	.columns .px-3 {padding-left: 3em; padding-right: 3em;}
	.columns .px-4 {padding-left: 4em; padding-right: 4em;}
	.columns .px-5 {padding-left: 5em; padding-right: 5em;}

	.pl-2 {padding-left: 1em;}
	.pl-3 {padding-left: 1.5em;}
	.pl-4 {padding-left: 2em;}
	.pl-5 {padding-left: 3em;}

	.pr-2 {padding-right: 1em;}
	.pr-3 {padding-right: 1.5em;}
	.pr-4 {padding-right: 2em;}
	.pr-5 {padding-right: 3em;}

	.py-2 {padding-top: 1em; padding-bottom: 1em;}
	.py-3 {padding-top: 1.5em; padding-bottom: 1.5em;}
	.py-4 {padding-top: 2em; padding-bottom: 2em;}
	.py-5 {padding-top: 3em; padding-bottom: 3em;}

	.pt-2 {padding-top: 1em}
	.pt-3 {padding-top: 1.5em;}
	.pt-4 {padding-top: 2em;}
	.pt-5 {padding-top: 3em;}

	.pb-2 {padding-bottom: 1em;}
	.pb-3 {padding-bottom: 1.5em;}
	.pb-4 {padding-bottom: 2em;}
	.pb-5 {padding-bottom: 3em;}

	.columns .pb-2 {padding-bottom: 2em;}
	.columns .pb-3 {padding-bottom: 3em;}
	.columns .pb-4 {padding-bottom: 4em;}
	.columns .pb-5 {padding-bottom: 5em;}
}

/* ==========================================================================
   Background Colors
   ========================================================================== */

.blue {background: #0096F0; color: #ffffff;}
.content-area.blue::after {content: ' '; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.green {background: #00C77D; color: #ffffff;}
.content-area.green::after {content: ' '; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.red {background: #FF420E; color: #ffffff;}
.content-area.red::after {content: ' '; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.deepblue {background: #171c25; color: #ffffff;}
.content-area.deepblue::after {content: ' '; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: top left;}
.testimonials.deepblue::after {content: ' '; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.deepblue.dark {background: #10141a; color: #ffffff; font-weight: 50; color: #ccc; }
.content-area.deepblue.dark::after {content: ' '; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-repeat: no-repeat; background-position: top left;} /* background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; */
.teal {background: #7FE3BE; color: #171c25;}
.content-area.teal::after {content: ""; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.yellow {background: #FFD746; color: #171c25;}
.content-area.yellow::after {content: ""; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.palegrey {background: #f2f2f2; color: #171c25; }
.white {background: #ffffff; color: #171c25;}
.content-area.white::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.intro.white::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.home .blog.white::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.main.white {position: relative;}
.main.white::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.main.white.no-bg::after {display: none;}
.lightblue {background: #d9effd; color: #171c25;}
.lightest {background: #f9f9f9; color: #171c25;}
.content-area.lightest::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-outline-dark.svg'); background-size: cover; background-repeat: no-repeat; background-position: bottom left;}

.security {background: #990000; color: #171c25;}

.content-area.security::after {content: ""; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-single-solid-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top left;}
.content img.uleska-logo { width: 200px; display: inline-block; border: 0; }

.content-area.no-image::after {display: none;}




/* ==========================================================================
   VIDEO FIRST SITE STYLES
   ==========================================================================*/


/* ==========================================================================
   Default Fonts
   ========================================================================== */

/* Defaults */
html, h1, h2, h3, p, span, li, small, label, input, select, textarea, .data {
  margin: 0; padding: 0; font-family: work-sans, sans-serif; font-weight: 200; font-style: normal;
}

h1 {font-size: 3.5em; font-weight: 600; line-height: 1.3; padding-bottom: 2rem; }
h2 {font-size: 2em;   font-weight: 200; line-height: 1.4; padding-bottom: 2rem; }
h3 {font-size: 1.5em; font-weight: 500; line-height: 1.5; padding-bottom: 2rem; }
p  {font-size: 1.15em; font-weight: 300; line-height: 1.8; padding-bottom: 1rem; }
span {font-weight: 300; }
ol {padding: .5em 0 1em 3.5em; }
ul li {font-size: 1.15em; font-weight: 300; line-height: 1.6; padding: 0.25rem 0; }
ol li {font-size: 1.15em; font-weight: 300; line-height: 1.6; padding: 0.25rem 0; }
b *, strong { font-weight: 500; }
small {}
label {font-weight: 600; text-transform: uppercase;}
input {font-weight: 300; }
select {font-weight: 300; }
textarea {font-weight: 300; }
.date { display: none; }

div.see-all-link { display: flex; align-items: center; justify-content: center; margin: 2rem 0; }
div.see-all-link a { text-align: center; font-size: 1.55em; color: #2792F0;  font-weight: 500; white-space: nowrap; }

/* header links */
h1 a, h2 a, h3 a { color: #10141a; }
h1 a:hover, h2 a:hover, h3 a:hover { color: rgba(0,150,240,1); }

@media screen and (max-width: 1000px) {
  h1 {font-size: 3.1em; }
  h2 {font-size: 1.8em; }
  h3 {font-size: 1.4em; }
  p  {font-size: 1.2em; }
}

@media screen and (max-width: 500px) {
  h1 {font-size: 2.7em; padding-bottom: 1.75rem; text-align: center; }
  h2 {font-size: 1.6em; padding-bottom: 1.5rem; text-align: center; }
  h3 {font-size: 1.3em; padding-bottom: 1.5rem; }
}

/* ==========================================================================
   Wrapper
   ========================================================================== */

.wrapper {margin: 0 auto; padding: 0; max-width: 1600px; padding: 0 3rem;}
.wrapper.no-border {margin: 0 auto; font-size: 100%; width: 100%;}
.wrapper.narrow {margin: 0 auto; font-size: 100%; width: 60%; padding: 0; max-width: 800px; }
.wrapper.medium {margin: 0 auto; font-size: 100%; width: 80%; padding: 0; max-width: 1100px; }

@media screen and (max-width: 1000px) {
	.wrapper {padding: 0 2rem;}
}
@media screen and (max-width: 500px) {
	.wrapper {padding: 0 1rem;}
  .wrapper.narrow {width: 100%;}
  .wrapper.medium{width: 100%;}
}


/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {margin: 0; padding: 50px 0; position: relative; width: 100%; overflow: hidden;}
.site-header .wrapper {display: flex; justify-content: space-between; align-items: center; align-content: center; height: 50px;}
.site-header .page-header .wrapper {display: flex; justify-content: center; align-items: center; align-content: center;}
.site-header.global {margin: 0; padding: 25px 0; height: 700px; min-height: 700px; position: relative; width: 100%; overflow: hidden;}
.site-header.global-thin {margin: 0; padding: 25px 0; height: auto; min-height: auto; position: relative; width: 100%; overflow: hidden;}


@media screen and (max-width: 500px) {
	.site-header {padding: 20px 0;}
}


/* ==========================================================================
   HERO CSS
   ========================================================================== */

.hero {margin: 0; padding-top: 8rem; display: flex; position: relative; z-index: 9000; content: ''; top: 0; width: 100%; }
.hero .wrapper {display: flex; justify-content: space-between; align-items: center; align-content: center;}
.hero .cover-image {content: ""; opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.hero .item {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.hero .item .detail {width: 38%; margin-top: 1rem; min-height: 600px; }
.hero .item figure.side-image {width: calc(62% + 3rem); margin-right: -3rem; align-self: flex-end; }
.hero.triangle::before {content: ""; opacity: 1; top: -180px; left: 0; bottom: 0; right: 0; position: absolute; z-index: -3; background-image: url('../img/bg/mesh-gradient-300-60.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.hero.triangle::after {content: ""; opacity: 0.05; top: -180px; left: 0; bottom: 0; right: 0; position: absolute; z-index: -2; background-image: url('../img/bg/icon-background-light.svg'); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.hero h1, .hero h2 { padding-bottom: 3rem; }
.hero p { color: #ccc; }
.hero .buttons { margin-top: 0rem; margin-bottom: 4rem}

@media screen and (max-width: 1000px) {
  .hero { padding-top: 2rem; }
	.hero .item .detail { width: 100%; text-align: center; min-height: 0; }
	.hero .item figure.side-image { width: 100%; text-align: center; }
	.hero .buttons { justify-content: center; }
}


/* ==========================================================================
   CUSTOMER LOGOS CSS
   ========================================================================== */

#customer-logos { background: #000; padding: 6rem 0; }  /* background-image: linear-gradient(#000, #13171E); */
#customer-logos .logo { display: flex; align-items: center; justify-content: center; height: 80px; }
#customer-logos .logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
#customer-logos .logos img { height: auto; margin: 0 1.5rem; width: 175px; max-height: 35px; }
#customer-logos .case-studies-link { display: flex; justify-content: center; padding: 3rem 0 0 0; }
#customer-logos .case-studies-link a { font-size: 1.15em; font-weight: 500; color: #fff; }
#customer-logos .case-studies-link a:hover { color: rgba(0,150,240,1); }

@media screen and (max-width: 800px) {
  #customer-logos { padding: 3rem 0;  }
}

/* ==========================================================================
   WHY CSS
   ========================================================================== */

.why::before {content: ""; opacity: 1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -3; background-image: url('../img/bg/video-tour-video-tour-background.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center; }

.why .why-intro { text-align: center; }
.why .why-intro p { font-size: 1.15em; color: #ddd; max-width: 40rem;  margin: auto;  }
.why * { outline: 0 none !important; }

.why .why-content { margin: 1rem 0 2rem 0; }
.why .why-content .why-item-wrapper { position: relative; display: flex; justify-content: center; min-height: 400px; max-height: 650px; align-items: center; }
.why .why-content .why-item-wrapper::before { content: ""; padding-top: 56.25%; }
.why .why-content .why-item-background { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.why .why-content .why-item-image { position: absolute; max-height: 88%; width: auto; }

.why .why-nav .slick-track { transform: none !important; }
.why .why-nav .why-nav-item { width: 100%;  }
.why .why-nav .why-icon { min-width: 3.125rem; max-width: 3.125rem; min-height: 3.125rem; max-height: 3.125rem; margin-right: 1.25rem; fill: #999; }
.why .why-nav .why-header { position: relative; display: flex; flex-direction: row; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; }
.why .why-nav .why-header::before { position: absolute; bottom: -3px; content: ''; display: block; width: 100%; height: 3px; background: #fff; }
.why .why-nav .why-body { font-size: 1.15em; font-weight: 50; color: #999; padding-right: 2rem; line-height: 1.7; }
.why .why-nav h2 { font-weight: 500; padding: 0; color: #999; }

.why .why-nav-item:hover .why-icon { fill: #2792F0; }
.why .why-nav-item:hover h2, .why .why-nav-item:hover .why-header { color: #fff; }
.why .why-nav-item:hover .why-body { color: #fff; }
.why .why-nav-item .why-header::after { position: absolute; bottom: -3px; content: ''; display: block; width: 0; height: 3px; background: #2792F0; transition: width .5s; }
.why .why-nav-item:hover .why-header::after { width: 100%; transition: width .5s; }

/* Why - current Slide */
.why .why-nav .slick-current .why-header::after { position: absolute; bottom: -3px; content: ''; display: block; width: 100%; height: 3px; background: #2792F0; transition: width .5s; -webkit-backface-visibility: hidden }
.why .why-nav .slick-current .why-icon { fill: #2792F0; }
.why .why-nav .slick-current h2 { color: #fff; }
.why .why-nav .slick-current .why-body { color: #fff; }

/* Why Slider CSS */
.why-content .slick-slide div { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 8rem; }
.why-nav .slick-slide { outline: none; cursor: pointer; }
.slick-prev:before { font-family: "Font Awesome 5 Free"; content: "\f104"; position: absolute; left: 0;  font-size: 5rem; font-weight:900; color: rgba(255,255,255,0.1); }
.slick-next:before { font-family: "Font Awesome 5 Free"; content: "\f105"; position: absolute; right: 0; font-size: 5rem; font-weight:900; color: rgba(255,255,255,0.1); }

@media screen and (max-width: 800px) {
  .why .why-nav .why-header { flex-direction: column; align-items: center; }
  .why .why-nav .why-body { text-align: center; padding: 0 0.25rem; font-size: 0.9em; }
  .why .why-nav h2 { font-size: 1.3em; }
  .why .why-nav .why-icon { margin: 0 0 0.5rem 0; }
}
@media screen and (max-width: 730px) {
  .why .why-content .why-item-image.landscape { height: auto; width: 91%; }
}

/* ==========================================================================
   Case Studies
   ========================================================================== */

.case-studies * { outline: none; }
.case-studies .wrapper { width: 90%; }

.case-study-content { min-height: 25rem; padding-top: 1rem; padding-bottom: 3rem; }
.case-study-content .case-study-slider { width: 100%; }

.case-study-content .case-study { display: flex; }
.case-study-content .case-study .video-col { width: 50%; }
.case-study-content .case-study .text-col { width: 50%; margin-left: 4rem; }
.case-study-content .case-study .case-study-quote { margin-bottom: 1rem; }
.case-study-content .case-study .case-study-quote p { font-size: 1.5em; }
.case-study-content .case-study .case-study-quote::before { content: ""; display: block; height: 50px; width: 50px; background-size: 38px 49px; background-image: url('../img/pull-quote.svg'); background-repeat: no-repeat; padding-bottom: 1rem; }
.case-study-content .case-study .case-study-more { display: flex; justify-content: space-between; }
.case-study-content .case-study .case-study-author { font-size: 1.15em; font-weight: 500; letter-spacing: 0.01em; }
.case-study-content .case-study .case-study-link { font-size: 1.15em; color: #2792F0;  font-weight: 500; white-space: nowrap; }

.case-study-nav .slick-track { transform: none !important; display: flex; justify-content: center; margin-bottom: 1rem; }
.case-study-logo { cursor: pointer; max-width: 18rem; height: 5.25rem; display: flex; align-items: center; margin: 0 2rem; padding: 1rem 1.5rem; background: #000; border-radius: 5px; border: solid 0.25rem #fff; box-shadow: 4px 4px 10px rgb(0 0 0 / 20%); }
.case-study-logo img { height: 100%; }

/* Case Study - Current / Hover Slide */
.case-study-nav .slick-current { border-color: #2792F0; }
.case-study-nav .slick-slide:hover { border-color: #2792F0; box-shadow: 8px 8px 10px rgb(0 0 0 / 40%); }

@media screen and (max-width: 800px) {
  #case-studies .wrapper { padding: 0; width: 95%; }
  .case-study-content { padding-bottom: 1rem; }
  .case-study-content .case-study { flex-direction: column-reverse; align-items: center; }
  .case-study-content .case-study .video-col { width: 100%; }
  .case-study-content .case-study .text-col { width: 100%; margin: 0; padding-bottom: 1rem; }
  .case-study-content .case-study .case-study-more { font-size: 1em; flex-direction: column; align-items: center; text-align: center; }
  .case-study-content .case-study .case-study-link { font-size: 1em; }
  .case-study-content .case-study .case-study-quote { margin: 0.25rem 0; }
  .case-study-content .case-study .case-study-quote::before { padding-bottom: 0; }
  .case-study-content .case-study .case-study-quote p { text-align: center; font-size: 1.1em; line-height: 1.4; padding-bottom: 0.25rem; }
  .case-study-content .case-study .case-study-author { font-size: 1em; margin-bottom: 0.25rem; }

  .case-study-nav .case-study-logo { padding: 0.5rem; margin: 0.25rem; width: 50% !important; }
  .case-study-nav .slick-track { width: 100% !important; }
}

/** Case Studies Listing page  (note a slider) **/

#case-studies-listings .case-study-content { min-height: 0; padding: 0; margin: 0; }
#case-studies-listings .case-study-content .case-study { align-items: center; }
#case-studies-listings .case-study { padding: 8rem 0; border-bottom: 1px solid #ddd; }
#case-studies-listings .case-study:last-child { border: none; }
#case-studies-listings .case-study.left { flex-direction: row-reverse; }
#case-studies-listings .case-study.left .text-col { margin: 0 4rem 0 0; }
#case-studies-listings .case-study-logo { border-radius: 0; border: none; box-shadow: none; margin: 2rem 0 0 0; max-width: 14rem; height: 4rem; }

@media screen and (max-width: 800px) {
  #case-studies-listings .case-study { padding: 2rem 0 3rem 0; }
  #case-studies-listings .case-study-logo { margin: 1rem auto 0 auto; max-width: 12rem; height: 3.5rem; }
  #case-studies-listings .case-study-quote::before { height: 32px; width: 32px; background-size: 25px 30px; }
  #case-studies-listings .case-study.left { flex-direction: column-reverse; }
  #case-studies-listings .case-study.left .text-col { margin: 0; }
}

/* #case-studies-listings .case-study-logo { width: 250px; height: 75px; align-items: center; background: #000; padding: 1rem 1.5rem; margin-top: 2rem; display: flex; } */

/* https://stackoverflow.com/questions/49765190/how-to-embed-vimeo-video-with-responsive-design */
.video-responsive {
  position: relative;
  display: block;
  overflow: hidden;
}
.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}
.video-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}




/* ==========================================================================
   Looks / Works / Ships CSS
   ========================================================================== */

#looksWorksShips .main-header h1 { text-align: center; padding-top: 4rem; }
#looksWorksShips .main-header h2 { text-align: center; }
#looksWorksShips .content-header { margin: 0; }
#looksWorksShips .content-header h1 { font-weight: 300; color: #777; }
#looksWorksShips .content-header strong { color: #fff; }
#looksWorksShips .content ul { margin-block-start: 0.25em; margin-block-end: 0.25em; }
#looksWorksShips .content li { color: #ddd; list-style: none; font-size: 1.15em; font-weight: 50; text-align: left; padding: 0; }
#looksWorksShips .content strong { font-weight: 500; color: #fff; }
#looksWorksShips .content article { padding: 4rem 0; }
#looksWorksShips article { padding: 2rem 0; }
#looksWorksShips figure.detail-media.image { max-width: 560px; background: radial-gradient(circle at center, rgba(0, 150, 240, 0.18) 11%, rgba(6, 120, 191, 0.11) 27%, rgba(20, 42, 60, 0.00) 40%); }

/* Triangular items - make generic ? */
#looksWorksShips li:before {
  content: "";
  border-color: transparent #2792F0;
  border-style: solid;
  border-width: 0.55em 0 0.55em 0.75em;
  display: block;
  height: 0;
  width: 0;
  left: -1.5em;
  top: 1.31em;
  position: relative;
}

/* ==========================================================================
   Security CSS
   ========================================================================== */

#security-preview figure.detail-media.image { max-width: 560px; background: radial-gradient(circle at center, rgba(0, 150, 240, 0.18) 11%, rgba(6, 120, 191, 0.11) 27%, rgba(20, 42, 60, 0.00) 40%); }
#security-preview a:hover { color: rgba(0,150,240,1); }
#security-preview p { color: #ddd; font-weight: 50; }
#security-preview strong { color: #fff; }
#security-preview a { font-weight: 500; }

#security p { color: #ddd; font-weight: 50; }
#security strong { color: #fff; }
#security figure.detail-media.image { max-width: 560px; background: radial-gradient(circle at center, rgba(0, 150, 240, 0.18) 11%, rgba(6, 120, 191, 0.11) 27%, rgba(20, 42, 60, 0.00) 40%); }

/* NO HOME YET */

.columns .wrapper.narrow {width: 80%;}
.integrations.columns .wrapper.narrow {width: 80%; padding: 0}
.integrations .listing h2 {font-size: 1.8em; font-weight: 600; line-height: 1.4; padding: 0;}
.support.columns .wrapper.narrow {width: 60%;}
#about h1 { max-width: 1024px; }

/* ==========================================================================
   Columns
   ========================================================================== */

.col-1 {margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; align-content: flex-start; align-items: stretch; flex-wrap: wrap; flex: 1; width: 100%;}
.col-1 .item {margin: 0 0 0 0; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: 100%; text-align: left;}

.col-2 {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; align-items: stretch; flex-wrap: wrap; flex: 1; width: 100%;}
.col-2 .item {display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: calc(1/2*100% - (1 - 1/2)*2em); text-align: left;}
.col-2 .item .content {text-align: left;}

.col-3 {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; align-items: stretch; flex-wrap: wrap; flex: 1; width: 100%;}
.col-3 .item {display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: calc(1/3*100% - (1 - 1/3)*2em); text-align: left;}

.col-4 {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; align-items: stretch; flex-wrap: wrap; flex: 1; width: 100%;}
.col-4 .item {display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: calc(1/4*100% - (1 - 1/4)*2em); text-align: left;}

.blog .col-4 {justify-content: flex-start;}
.blog .col-4 .item {margin-right: 2em; flex-direction: column; justify-content: flex-start; width: calc(1/3*100% - (1 - 1/3)*2em);}
.blog .col-4 .item:nth-child(3n) {margin-right: 0;}

.col-3 .item .content {text-align: left;}
.col-4 .item .content {text-align: left;}

.pricing .col-4 .item {margin: 3rem 0 2rem 0; display: flex; flex-direction: column; align-items: stretch; width: calc(1/4*100% - (1 - 1/4)*2em); text-align: center;}

@media screen and (max-width: 1400px) {
	.integrations .col-3 .item {width: calc(1/2*100% - (1 - 1/2)*2em);}
	.support .col-3 .item {width: calc(1/2*100% - (1 - 1/2)*2em);}
}

@media screen and (max-width: 1100px) {
	.columns .col-2 .item,
	.columns .col-3 .item {font-size: 90%;}
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 1000px) {
	.blog .col-3 {flex-wrap: wrap; justify-content: space-between;}
	.blog .col-3 .item:nth-child(3n) {margin-right: 0;}

	.blog .col-3 .item {margin-right: 0; width: calc(50% - 1em); }
}

@media screen and (max-width: 760px) {
	.columns .col-2 {flex-direction: column;}
	.columns .col-2 .item {width: 100%;}
	.columns .col-3 {flex-direction: column;}
	.columns .col-3 .item {width: 100%;}

	.blog .col-3 {flex-direction: column;}
	.blog .col-3 .item {width: 100%;}
}


/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header {padding: 0; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; height: 600px; position: absolute; top: 100px; width: 100%; color: #ffffff; overflow: hidden; box-sizing: border-box; z-index: 10;}
.page-header .wrapper {flex-direction: column;}

.page-header .image {content: ""; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.25; position: absolute; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.site-header .image {content: ""; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.25; position: absolute; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: center center;}


@media screen and (max-width: 1024px) {
	.page-header .image.desktop {display: none;}
}

@media screen and (min-width: 1024px) {
	.page-header .image.mobile {display: none;}
	.page-header .image.desktop {display: block;}
}

@media screen and (min-width: 800px) {
	.page-header {height: 600px;}
}

@media screen and (max-width: 800px) {
	.page-header {padding: 80px 0 0 0;}
}


/* ==========================================================================
   Section Header
   ========================================================================== */

.section-header {margin: 0 0 2em 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;}
.columns .section-header {margin-bottom: 3em;}
.section-header.center h2 {text-align: center;}
.section-header.center h3 {text-align: center;}

.section-header.left {align-items: flex-start;}

.section-header-small {margin: 0 0 2em 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%;}

@media screen and (max-width: 900px) {
	.section-header {margin: 0 auto 2em auto; font-size: 80%; width: 90%;}
	.section-header.center {margin: 0 auto 2em auto; font-size: 80%; width: 100%;}
	.section-header.left {margin: 0 0 2em 0; font-size: 80%; width: 90%;}
}

@media screen and (max-width: 750px) {
	.section-header.left {margin: 0 auto 2em auto; width: 90%; flex: 1; flex-grow: 1; align-content: flex-start;}
}

@media screen and (max-width: 480px) {
	.section-header {font-size: 70%;}
}


/* ==========================================================================
   Article Header
   ========================================================================== */

.article-header {margin: 0 0 2em 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%;}

@media screen and (max-width: 900px) {
	.article-header {margin: 0 auto 2em auto; font-size: 80%;}
}

@media screen and (max-width: 480px) {
	.article-header {font-size: 70%;}
}


/* ==========================================================================
   Content Header
   ========================================================================== */

.content-header {margin: 0 0 1em 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%;}

.content p:last-child { padding: 0; }

.content-header.center { align-items: center;}


/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs ul {margin: 0; padding: 1em 0; display: flex; justify-content: flex-start; align-content: center; flex-wrap: wrap;}
.breadcrumbs ul li {margin: 0; padding: 0; list-style: none; font-size: 1em; line-height: 1.5; font-weight: 300;}
.breadcrumbs ul li a {margin: 0; padding: 0;}
.breadcrumbs ul li::after {margin: 0; padding: 0 1em 0 0.5em; list-style: none; font-size: 0.75em; line-height: 1.5; font-family: "Font Awesome 5 Free"; font-weight: 900; content:'\f054'; text-align: center;}
.breadcrumbs ul li:last-child::after {display: none;}


 /* ==========================================================================
   Container
   ========================================================================== */

@media screen and (max-width: 1400px) {
	.container {margin: 0 auto; width: 90%;}
	.work .container {margin: 0 auto; width: 100%;}
	.services .container {margin: 0 auto; width: 100%;}
	.columns .container {margin: 0 auto; width: 100%;}

	.wrapper.no-border .container {width: 100%;}
}

@media screen and (max-width: 760px) {
  .container.narrow {margin: 0 auto; width: 90%;}
	.columns .container {margin: 0 auto; width: 90%;}
}

/* ==========================================================================
   Header Main
   ========================================================================== */

.header-main {margin: 0; padding: 0; position: relative; z-index: 9998; flex-grow: 2;}
.header-main .header-logo-title {display: none;}
.header-main .header-logo-image a {display: block;}
.header-main .header-logo-image img {width: auto; height: 40px; max-height: 40px;}


@media screen and (max-width: 500px) {
	.header-main .header-logo-image img {height: 30px; max-height: 30px;}
}


/* ==========================================================================
  Menu
   ========================================================================== */

.menu {margin: 0; padding: 0; position: relative; z-index: 9998; display: none;}
.menu .menu-wrapper {display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}


@media screen and (min-width: 1300px) {
	.menu {display: block;}
}


/* ==========================================================================
   Nav
   ========================================================================== */

.menu .nav a {color: #ffffff;}
.menu .nav ul {margin: 0; padding: 0; display: flex; flex-direction: row;}
.menu .nav ul li {margin: 0; padding: 0; list-style: none; font-size: 1em;}

.menu .nav ul li a {padding: 15px 15px 0 15px; color: rgba(255,255,255,1); line-height: 1;letter-spacing: 0.05em;  display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; font-weight: 300;}
.menu .nav ul li a::after {margin: 15px 0 0 0; content: ''; height: 2px; width: 0; transition: 0.3s ease-in-out; background: rgb(0,150,240);}
.menu .nav ul li a:hover::after {width: 40px; }
.menu .nav ul li.selected a::after, .menu .nav ul li.ancestor a::after {width: 100%;}
.menu .nav ul li:last-child {margin-left: 20px; background: #ffffff; border-radius: 0.25em; height: 0; }
.menu .nav ul li:last-child a {padding: 15px 30px; background: #fff; color: rgba(0,150,240,1); border-radius: 0.25em; font-weight: 600;}
.menu .nav ul li:last-child a:hover {background: #f0f0f0;  }
.menu .nav ul li:last-child a::after {display: none;}

@media screen and (max-width: 1400px) {
	.menu .nav ul li a {padding: 15px 10px 0 10px;}
}

/* ==========================================================================
  Mobile Menu
   ========================================================================== */

.mobile-menu {position: relative; z-index: 9998;}
.mobile-menu .menu-wrapper {display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}

.mobile-menu .nav-global {}

.mobile-menu .nav a {color: #ffffff;}
.mobile-menu .nav ul {margin: 0 20px 0 0; padding: 0; display: flex; flex-direction: row;}
.mobile-menu .nav ul li {margin: 0; padding: 0; list-style: none; font-size: 1em;}

.mobile-menu .nav ul li a {padding: 15px 15px 0 15px; color: rgba(255,255,255,1); line-height: 1;letter-spacing: 0.05em;  display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; font-weight: 300;}
.mobile-menu .nav ul li a:hover {color: rgba(255,255,255,0.7);}
.mobile-menu .nav ul li a::after {margin: 15px 0 0 0; content: ''; height: 2px; width: 0; transition: 0.3s ease-in-out; background: rgb(0,150,240);}
.mobile-menu .nav ul li a:hover::after {width: 40px;}
.mobile-menu .nav ul li:last-child {margin-left: 20px; background: #ffffff; border-radius: 0.25em;}
.mobile-menu .nav ul li:last-child a {padding: 15px 30px; background:  rgba(255,255,255,1); color: rgba(0,150,240,1); border-radius: 0.25em; font-weight: 600;}
.mobile-menu .nav ul li:last-child a:hover {background:  rgba(255,255,255,0.9); }
.mobile-menu .nav ul li:last-child a::after {display: none;}
.mobile-menu .nav ul li:nth-last-child(2) a {margin-left: 20px; padding: 15px 30px; border: 1px solid rgba(255,255,255,1); background: rgba(255,255,255,0); border-radius: 0.25em; font-weight: 400;}
.mobile-menu .nav ul li:nth-last-child(2) a:hover {color: #171c25; background: rgba(255,255,255,1);}
.mobile-menu .nav ul li:nth-last-child(2) a::after {display: none;}

@media screen and (min-width: 1300px) {
	.mobile-menu {display: none;}
}

@media screen and (orientation: landscape) and (max-width: 900px) {
	body.menu-open .mobile-menu .menu-wrapper {flex-direction: column;}
}

@media screen and (max-width: 800px) {
	.mobile-menu .nav ul li:last-child a {padding: 15px 20px;}
	.mobile-menu .nav ul li:nth-last-child(2) a {padding: 15px 20px;}
}

@media screen and (orientation: portrait) and (max-width: 740px) {
	.mobile-menu .nav ul li:last-child {display: none;}
}

@media screen and (orientation: landscape) and (max-width: 700px) {
	.mobile-menu .nav ul li:last-child {display: none;}
}

@media screen and (max-width: 480px) {
	.mobile-menu .nav ul {margin: 0 10px 0 0;}
}

@media screen and (max-width: 470px) {
	.mobile-menu .nav {display: none;}
}


/* ==========================================================================
   Menu Button
   ========================================================================== */

.mobile-button {position: relative; z-index: 9999;}
.mobile-button .menu-button {margin: 0; padding: 10px; background: none; border: none; display: flex; flex-direction: column; width: 50px; height: 50px; overflow: hidden; font-size: 0; top: 0; right: 0; box-sizing: content-box!important; cursor: pointer; transition: 0.5s ease-in-out;}
.mobile-button .menu-button:focus {outline: none;}
.mobile-button .menu-button span.menu-button-box {width: 50px; display: block;}
.mobile-button .menu-button span.menu-button-box span.menu-button-inner {display: block; position: absolute; top: 15px; right: 10px; height: 1px; background: #343A40; width: 45px; transition: 0.3s ease-in-out;}
.mobile-button .menu-button span.menu-button-box span.menu-button-inner::before {display: block; position: absolute; top: 19px; right: 0; width: 35px; height: 1px; background: #343A40; content: ''; transition: 0.3s ease-in-out;}
.mobile-button .menu-button span.menu-button-box span.menu-button-inner::after {display: block; position: absolute; top: 38px; right: 0; width: 45px; height: 1px; background: #343A40; content: ''; transition: 0.3s ease-in-out;}

.mobile-button .menu-button:hover span.menu-button-box span.menu-button-inner {width: 50px;}
.mobile-button .menu-button:hover span.menu-button-box span.menu-button-inner::before {width: 50px;}
.mobile-button .menu-button:hover span.menu-button-box span.menu-button-inner::after {width: 50px;}

.mobile-button.light .menu-button span.menu-button-box span.menu-button-inner {background: #ffffff;}
.mobile-button.light .menu-button span.menu-button-box span.menu-button-inner::before {background: #ffffff;}
.mobile-button.light .menu-button span.menu-button-box span.menu-button-inner::after {background: #ffffff;}

.mobile-button.light .menu-button:hover span.menu-button-box span.menu-button-inner {width: 50px;}
.mobile-button.light .menu-button:hover span.menu-button-box span.menu-button-inner::before {width: 50px;}
.mobile-button.light .menu-button:hover span.menu-button-box span.menu-button-inner::after {width: 50px;}

body.menu-open .mobile-button .menu-button.menu-button-x {margin: 0; padding: 10px;}
body.menu-open .mobile-button .menu-button.menu-button-x span.menu-button-box span.menu-button-inner {display: block; position: absolute; top: 35px; right: 10px; height: 0; width: 50px; background: none;}
body.menu-open .mobile-button .menu-button.menu-button-x span.menu-button-box span.menu-button-inner::before {top: 0; width: 50px; height: 2px; transform: rotate(45deg); background: #ffffff;}
body.menu-open .mobile-button .menu-button.menu-button-x span.menu-button-box span.menu-button-inner::after {top: 0; width: 50px; height: 2px; transform: rotate(-45deg); background: #ffffff;}

body.menu-open .mobile-button .menu-button.menu-button-x:hover {opacity: 1;}
/* body.menu-open .menu .menu-button.menu-button-x:hover span.menu-button-box span.menu-button-inner {transform: rotate(90deg);} */

#menu-cover {position: fixed; display: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 9997; background: rgba(52,58,64,0); transition: background 1s linear;}
body.menu-open #menu-cover {display: block; cursor: pointer; background: rgba(52,58,64,0.5);}

@media screen and (min-width: 1300px) {
	.mobile-button {display: none;}
	body.menu-open .mobile-button .menu-button.menu-button-x:hover {opacity: 1;}
}


/* ==========================================================================
  Mobile Nav
   ========================================================================== */

.nav-mobile {margin: 0; padding: 0; height: 100vh; min-height: 100vh; position: absolute; width: 100%; overflow: hidden; top: 0; right: 0;}

.nav-mobile .nav-mobile-wrapper {width: 100vw; height: 100vh; transition: 0.3s ease-in-out; position: relative; top: 0; right: -100vw; display: flex; justify-content: center; flex-direction: row; align-items: center; text-align: center; overflow: hidden; z-index: 9998; overflow: hidden;}
.nav-mobile .nav-mobile-wrapper::after {content: ""; opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-background-light-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
body.menu-open .nav-mobile .nav-mobile-wrapper {width: 100vw; right: 0;}

.nav-mobile .nav-list {margin: 0 0 0 50px; width: 45%; border-left: 2px solid #ffffff;}
body.menu-open .nav-mobile .nav-list {right: 0; opacity: 1;}

.nav-mobile .nav-list .nav ul {margin: 0; padding: 0 0 20px 50px; list-style: none;}
.nav-mobile .nav-list .nav ul li {display: block; color: #ffffff; font-size: 1.5em; font-weight: 300; text-transform: uppercase; line-height: 2; opacity: 0; }

body.menu-open .nav-mobile .nav ul li {right: 0; opacity: 1;}
.nav-mobile .nav-list .nav ul li a {text-decoration: none; color: #ffffff; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
.nav-mobile .nav-list .nav ul li a::after {content: ''; height: 2px; width: 0; background: rgb(23,28,37); background: rgba(23,28,37,1);}
.nav-mobile .nav-list .nav ul li a:hover::after {width: 50px;}
.nav-mobile .nav-list .nav ul li.selected a::after {width: 50px;}
.nav-mobile .nav-list .nav ul li.selected a::after {background: rgb(255,255,255); background: rgba(255,255,255,1);}

.nav-mobile .sign-up {margin: 0 0 0 80px; width: 45%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; }
body.menu-open .nav-mobile .sign-up {bottom: 0; opacity: 1;}
.nav-mobile .sign-up h3 {padding: 0 0 30px 0; font-size: 3em; font-weight: 700; line-height: 1.1; text-transform: none; color: #ffffff;}

@media screen and (max-width: 1000px) {
	.nav-mobile .sign-up h3 {padding: 0 0 10px 0;}
}

@media screen and (orientation: landscape) and (max-width: 850px) {
	.nav-mobile .nav-list .nav ul li {font-size: 1.25em;}

	.nav-mobile .sign-up h3 {font-size: 2.5em;}
}

@media screen and (orientation: landscape) and (max-width: 760px) {
	.nav-mobile .nav-mobile-wrapper {flex-direction: row;}
	.nav-mobile .nav-list {width: 50%;}
	.nav-mobile .sign-up {width: 45%;}
}

@media screen and (orientation: portrait) and (max-width: 760px) {

	.nav-mobile .nav-mobile-wrapper {flex-direction: column-reverse;}

	.nav-mobile .nav-list {margin: 0 0 30px 0; border-left: none; width: 80%;}
	.nav-mobile .nav-list .nav ul {margin: 0; padding: 0 0 20px 0; list-style: none;}
	.nav-mobile .nav-list .nav ul li {font-size: 1.25em;}

	.nav-mobile .sign-up {margin: 0 0 0 0; width: 80%;}
	.nav-mobile .sign-up h3 {font-size: 2.5em; width: 80%;}
}

@media screen and (orientation: landscape) and (max-width: 600px) {
	.nav-mobile .nav-list {margin: 0 0 0 20px; width: 50%;}
	.nav-mobile .nav-list .nav ul {padding: 0 0 20px 30px;}
	.nav-mobile .nav-list .nav ul li {font-size: 1.15em;}

	.nav-mobile .sign-up {width: 45%;}
	.nav-mobile .sign-up h3 {font-size: 1.75em;}
}

@media screen and (max-width: 480px) {

	.nav-mobile .nav-mobile-wrapper {padding-top: 30px; flex-direction: column-reverse; justify-content: flex-end;}

	.nav-mobile .nav-list {margin: 0 0 10px 0;}
	.nav-mobile .nav-list .nav ul li {font-size: 1.25em;}

	.nav-mobile .sign-up h3 {padding: 0 0 0 0; font-size: 2em; width: 100%;}

}

@media screen and (max-width: 360px) {
	.nav-mobile .nav-list .nav ul li {font-size: 1.15em;}

	.nav-mobile .sign-up h3 {font-size: 1.75em;}
}


/* ==========================================================================
   Buttons
   ========================================================================== */

ul.buttons {margin: 30px 0 0 0; padding: 0; display: flex; flex-direction: row;}
ul.buttons li {margin: 0; padding: 0; list-style: none; font-size: 1.2em;}
ul.buttons li {margin-right: 20px; border-radius: 0.25em; max-width: 300px;}
ul.buttons li:last-child {margin-right: 0;}

ul.buttons li a {padding: 20px 50px; color: rgba(255,255,255,1); line-height: 1; letter-spacing: 0.05em; display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; font-weight: 300;}

ul.buttons li.blue a {color: #ffffff; border: 1px solid rgba(0,150,240,1); background: rgba(0,150,240,1); border-radius: 0.25em; font-weight: 400;}
ul.buttons li.blue a:hover {color: #ffffff; border: 1px solid rgba(0,150,240,0.8); background: rgba(0,150,240,0.8);}
ul.buttons li.blue a::after {display: none;}

ul.buttons li.blue.border {background: none;}
ul.buttons li.blue.border a {color: #0096F0; border: 1px solid rgba(0,150,240,1); background: rgba(255,255,255,0); border-radius: 0.25em; font-weight: 400;}
ul.buttons li.blue.border a:hover {color: #ffffff; border: 1px solid rgba(0,150,240,0.8); background: rgba(0,150,240,0.8);}
ul.buttons li.blue.border a::after {display: none;}

ul.buttons li.deepblue {background: #ffffff;}
ul.buttons li.deepblue a {color: #ffffff; border: 1px solid rgba(23,28,37,1); background: rgba(23,28,37,1); border-radius: 0.25em; font-weight: 400;}
ul.buttons li.deepblue a:hover {color: #ffffff; border: 1px solid rgba(23,28,37,0.9); background: rgba(23,28,37,0.9);}
ul.buttons li.deepblue a::after {display: none;}

ul.buttons li.deepblue.border {background: none;}
ul.buttons li.deepblue.border a {color: #171c25; border: 1px solid rgba(23,28,37,1); background: rgba(23,28,37,0); border-radius: 0.25em; font-weight: 400;}
ul.buttons li.deepblue.border a:hover {color: #ffffff; background: rgba(23,28,37,1);}
ul.buttons li.deepblue.border a::after {display: none;}

ul.buttons li.white {background: none;}
ul.buttons li.white a {color: #0096F0; border: 1px solid rgba(255,255,255,1); background: rgba(255,255,255,1); border-radius: 0.25em; font-weight: 400;}
ul.buttons li.white a:hover {border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.8);}
ul.buttons li.white a::after {display: none;}

ul.buttons li.white.border {background: none;}
ul.buttons li.white.border a {color: #ffffff; border: 1px solid rgba(255,255,255,1); background: rgba(255,255,255,0); border-radius: 0.25em; font-weight: 400;}
ul.buttons li.white.border a:hover {color: #0096F0; background: rgba(255,255,255,1);}
ul.buttons li.white.border a::after {display: none;}

.nav-mobile .sign-up ul.buttons li:last-child {background: none;}
.nav-mobile .sign-up ul.buttons li:last-child a {color: #0096F0; border: 1px solid rgba(255,255,255,1); background: rgba(255,255,255,1); border-radius: 0.25em; font-weight: 400;}
.nav-mobile .sign-up ul.buttons li:last-child a:hover {border: 1px solid rgba(255,255,255,0.8); background: #f0f0f0; }
.nav-mobile .sign-up ul.buttons li:last-child a::after {display: none;}

.nav-mobile .sign-up ul.buttons li:nth-last-child(2) {background: none; width: 100%; }
.nav-mobile .sign-up ul.buttons li:nth-last-child(2) a {color: #ffffff; border: 1px solid #fff; background: rgba(255,255,255,0); border-radius: 0.25em; font-weight: 400;}
.nav-mobile .sign-up ul.buttons li:nth-last-child(2) a:hover {color: #0096F0; background: #f0f0f0; }
.nav-mobile .sign-up ul.buttons li:nth-last-child(2) a::after {display: none;}

.columns ul.buttons {flex-direction: column; justify-content: center; align-content: center;}
.columns ul.buttons li {max-width: 100%;}
.columns .col-1 ul.buttons li {max-width: 400px;}
.columns ul.buttons li a {padding: 20px 20px; display: flex; flex-grow: 2;}
.columns ul.buttons li.dark.border {background: none;}
.columns ul.buttons li.dark.border a {color: #171c25; border: 1px solid rgba(23,28,37,1); background: rgba(23,28,37,0); border-radius: 0.25em; font-weight: 400;}
.columns ul.buttons li.dark.border a:hover {color: #ffffff; background: rgba(23,28,37,1);}
.columns ul.buttons li.dark.border a::after {display: none;}

.columns ul.buttons li.light.border {background: none;}
.columns ul.buttons li.light.border a {padding: 20px 20px; color: #ffffff; border: 1px solid rgba(255,255,255,1); background: rgba(255,255,255,0); border-radius: 0.25em; font-weight: 400;}
.columns ul.buttons li.light.border a:hover {color: #0096F0; background: rgba(255,255,255,1);}
.columns ul.buttons li.light.border a::after {display: none;}

@media screen and (max-width: 1000px) {
	.nav-mobile .sign-up ul.buttons {flex-direction: column;}
	.nav-mobile .sign-up ul.buttons li {margin-right: 0; margin-bottom: 20px;}
	.nav-mobile .sign-up ul.buttons li:last-child {margin-bottom: 0;}
	.columns .col-1 ul.buttons li {max-width: 100%;}
}


@media screen and (max-width: 500px) {
	ul.buttons {flex-direction: column; align-items: center; }
	ul.buttons li {margin-right: 0; }
	ul.buttons li:last-child {margin-bottom: 0;}
}

@media screen and (max-width: 500px) {
	.nav-mobile .sign-up ul.buttons {margin: 30px 0 0 0;}
	.nav-mobile .sign-up ul.buttons li {margin-bottom: 30px; font-size: 1.15em;}
	.nav-mobile .sign-up ul.buttons li a {padding: 15px 30px;}
}


/* ==========================================================================
   Intro
   ========================================================================== */

.intro {position: relative; overflow: hidden; height: 100%;}


/* ==========================================================================
   Customers
   ========================================================================== */

.customers {position: relative; overflow: hidden; height: 100%;}
.customers .listing {display: flex; flex-direction: row; justify-content: center; align-content: center; align-items: center; flex-wrap: wrap;}
.customers .listing .item {display: flex; justify-content: center;}
.customers .listing .item img {max-height: 80px; max-width: 150px; width: auto; }

@media screen and (max-width: 1400px) {
	.customers .listing {justify-content: flex-start;}
	.customers .listing .item {width: calc(100% / 3);}
}

@media screen and (max-width: 1024px) {
	.customers .listing .item:last-child { display: none; }
}

@media screen and (max-width: 1024px) {
	.customers .listing .item {width: calc(100% / 2);}
}


/* ==========================================================================
   Integrations
   ========================================================================== */

.integrations {position: relative; overflow: hidden; height: 100%;}
.integrations .listing .item {position: relative; border-radius: 0.5em; overflow: hidden; align-content: stretch; align-items: stretch;}
.integrations .listing .item .item-content .content-header {margin: 0 0 0.5em 0;}
.integrations .listing .item a {position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; align-content: stretch; flex: 1; transition: all 0.3s; z-index: 2;}
.integrations .listing .item a .item-detail {display: flex; flex-direction: row; justify-content: center; height: 100%;}
.integrations .listing .item a .item-media {width: 80px; min-width: 80px;}
.integrations .listing .item a .item-media figure.icon img {width: 80px; height: auto; max-height: none;}
.integrations .listing .item a .item-content {flex-grow: 2;}

.integrations .listing.dark .item {background: #10141a;}
.integrations .listing.dark .item a {color: #ffffff;}
.integrations .listing.dark .item::before {position: absolute; content: ''; top: 0; bottom: 0; right: -100%; width: 100%; z-index: -1; background: #10141a; background: linear-gradient(-45deg, rgba(0,150,240,1) 0%, rgba(0,150,240,0) 75%); opacity: 1; transition: all 0.3s;}
.integrations .listing.dark .item:hover::before {right: 0;}
.integrations .listing.dark .item::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; background-image: url('../img/bg/icon-background-light-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center left;}

.integrations .listing.dark .item:last-child {background: #f5f5f5;}
.integrations .listing.dark .item:last-child a {color: #171c25; }
.integrations .listing.dark .item:last-child::before {position: absolute; content: ''; top: 0; bottom: 0; right: -100%; width: 100%; z-index: -1; background: #f5f5f5; background: linear-gradient(-45deg, rgba(200,200,200,1) 0%, rgba(200,200,200,0) 75%); opacity: 1; transition: all 0.3s;}
.integrations .listing.dark .item:last-child:hover::before {right: 0;}
.integrations .listing.dark .item:last-child::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; background-image: url('../img/bg/icon-background-dark-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center left;}

.integrations .listing.light .item {background: #f5f5f5;}
.integrations .listing.light .item a {color: #171c25;}
.integrations .listing.light .item::before {position: absolute; content: ''; top: 0; bottom: 0; right: -100%; width: 100%; z-index: -1; background: #f5f5f5; background: linear-gradient(-45deg, rgba(16,20,26,1) 0%, rgba(16,20,26,0) 75%); opacity: 0.25; transition: all 0.3s;}
.integrations .listing.light .item:hover::before {right: 0;}
.integrations .listing.light .item::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; background-image: url('../img/bg/icon-background-dark-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center left;}

.integrations .listing.light .item:last-child {background: #171c25;}
.integrations .listing.light .item:last-child a {color: #ffffff; border: none;}
.integrations .listing.light .item:last-child::before {position: absolute; content: ''; top: 0; bottom: 0; right: -100%; width: 100%; z-index: -1; background: #FFD746; background: linear-gradient(-45deg, rgba(0,150,240,1) 0%, rgba(0,150,240,0) 75%); opacity: 1; transition: all 0.3s;}
.integrations .listing.light .item:last-child:hover::before {right: 0;}
.integrations .listing.light .item:last-child::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; background-image: url('../img/bg/icon-background-light-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center left;}


@media screen and (max-width: 900px) {
	.integrations .listing .item a .item-media {width: 60px; min-width: 60px;}
	.integrations .listing .item a .item-media figure.icon img {width: 60px; height: auto; max-height: none;}
}

@media screen and (max-width: 480px) {
	.integrations .listing .item a .item-detail {flex-direction: column; align-items: center; }
	.integrations .listing .item a .item-media {padding-bottom: 1em;}
	.integrations .listing .item a .item-content {padding-left: 0;}
}


/* ==========================================================================
   Support
   ========================================================================== */

.support {position: relative; overflow: hidden; height: 100%;}
.support .listing .item {position: relative; border-radius: 0.5em; solid; overflow: hidden; align-content: stretch; align-items: stretch;}
.support .listing .item .item-content .content-header {margin: 0 0 0.5em 0;}
.support .listing .item a {position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; align-content: stretch; flex: 1; transition: all 0.3s; z-index: 2;}
.support .listing .item a .item-detail {display: flex; flex-direction: row; justify-content: center; height: 100%;}
.support .listing .item a .item-media {width: 80px; min-width: 80px;}
.support .listing .item a .item-media figure.icon img {width: 80px; height: auto; max-height: none;}
.support .listing .item a .item-content {flex-grow: 2;}

.support .listing.dark .item {background: #10141a;}
.support .listing.dark .item a {color: #ffffff;}
.support .listing.dark .item::before {position: absolute; content: ''; top: 0; bottom: 0; right: -100%; width: 100%; z-index: -1; background: #10141a; background: linear-gradient(-45deg, rgba(0,150,240,1) 0%, rgba(0,150,240,0) 75%); opacity: 1; transition: all 0.3s;}
.support .listing.dark .item:hover::before {right: 0;}
.support .listing.dark .item::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; background-image: url('../img/bg/icon-background-light-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center left;}

.support .listing.light .item {background: #f5f5f5; box-shadow: none;}
.support .listing.light .item:hover {box-shadow: none;}
.support .listing.light .item a {color: #171c25;}
.support .listing.light .item a:hover {color: #0096F0;}
.support .listing.light .item::before {display: none;}
.support .listing.light .item:hover::before {right: 0;}
.support .listing.light .item::after {display: none;}

@media screen and (max-width: 900px) {
	.support .listing .item a .item-media {width: 60px; min-width: 60px;}
	.support .listing .item a .item-media figure.icon img {width: 60px; height: auto; max-height: none;}
}

@media screen and (max-width: 480px) {
	.support .listing .item a .item-detail {flex-direction: column;}
	.support .listing .item a .item-media {padding-bottom: 1em;}
	.support .listing .item a .item-content {padding-left: 0;}
}


/* ==========================================================================
   Pricing
   ========================================================================== */

#pricing-page.main > section#pricing > div.wrapper > header.section-header {display: none;}

.pricing {color: #171c25; position: relative; overflow: hidden; height: 100%;}
.pricing::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-size: contain; background-repeat: no-repeat; background-position: top left;}
.pricing .section-header {}
.pricing .listing.col-4 overflow: hidden;}
.pricing .listing .item {margin-top: 50px; border-radius: 0.5em; }
.pricing .listing .item:nth-child(2) {margin-top: 0;}
.pricing .listing .item .option {padding: 1.5rem 1rem; margin-bottom: 0; border-radius: 0.5em; min-height: 400px; box-shadow: 0px 15px 10px -10px rgba(23,28,37,0.3); transition: all 0.3s; justify-content: space-between; overflow: hidden; position: relative; z-index: 2; color: #171c25; display: flex; flex-grow: 1; flex-direction: column; }
.pricing .listing .item .option:hover {box-shadow: 0px 15px 10px -10px rgba(23,28,37,0.5);}
.pricing .listing .item .option.highlighted {color: #ffffff; min-height: 450px; padding: 0; }
.pricing .listing .item .option.highlighted header {padding: 1.5rem 1rem 0 1rem; }
.pricing .listing .item .option.highlighted .detail {padding: 0 1rem; }
.pricing .listing .item .option.highlighted .buttons {padding: 0 1rem; }
.pricing .listing .item .option.highlighted .trial {padding: 0 1rem 1.5rem 1rem; }
.pricing .listing .item .recommended {min-height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pricing .listing .item .recommended span {font-size: 1em; font-weight: 500; text-transform: uppercase;}

.pricing .listing .item header h3 {font-size: 2.25em; font-weight: 600; padding-bottom: 0.5rem;}
.pricing .listing .item header h4 {margin: 0;}

.pricing .listing .item .price {min-height: 8rem; justify-content: center; display: flex; margin: 0.5rem 0; align-items: center; justify-content: center; }
.pricing .listing .item .price span {font-size: 1.5em; font-weight: 400;}
.pricing .listing .item .price span strong {font-size: 1.8em; font-weight: 600;}

.pricing .listing .item .detail {display: flex; margin: 0 0 1rem 0; align-items: center; }
.pricing .listing .item .detail p {font-size: 1em; font-weight: 300; padding: 0; }

.pricing .listing .item .trial {margin-top: 15px;}
.pricing .listing .item .trial p {font-size: 0.9em; font-weight: 300;}

.pricing .listing .item ul.buttons {margin: 0 0 0 0; padding: 0; display: flex; flex-direction: column;}
.pricing .listing .item ul.buttons li {max-width: 100%;}
.pricing .listing .item ul.buttons li a {padding: 15px; font-size: 1.1rem; }

.pricing .features {margin: 0 2em; color: #171c25; justify-content: flex-start; align-items: stretch; overflow: hidden; transition: all 0.3s;}
.pricing .features header {height: 50px;}
.pricing .features h3 {height: 50px; font-size: 1.5em;}
.pricing .features ul {margin: 0; padding: 0; max-height: 150px; overflow: hidden; transition: all 0.5s linear;}
.pricing.open .features ul {margin: 0; padding: 0; max-height: 800px; overflow: hidden;}
.pricing .item.open .features ul {margin: 0; padding: 0; max-height: 800px; overflow: hidden;}
.pricing .features ul li {margin: 0; padding: 0 1em; list-style: none; font-size: 1em; min-height: 50px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.pricing .features ul li strong {width: 50%; display: flex; justify-content: flex-start; text-align: left;}
.pricing .features ul li i {font-size: 1.15em; font-style: normal; font-weight: 300; display: flex; justify-content: center; align-items: center; flex-grow: 2;}
.pricing .features ul li i.fa-circle.yes {font-size: 1.3em; color: #00C77D; font-weight: 600;}
.pricing .features ul li i.fa-circle.no {font-size: 1.3em; color: #5C5C5C;}
.pricing .features ul li:nth-child(odd) {background: #f6f6f6;}

.pricing .features .more-link {display: flex; flex-direction: column; justify-content: center;}
.pricing .features .more-link.mobile {display: none;}
.pricing .features .more-link span a {display: flex; flex-grow: 1; justify-content: center; align-items: center; height: 50px; color: #5C5C5C; transform: rotate(0deg);}
.pricing .features .more-link span a:hover {padding-top: 5px; color: #0096F0;}
.pricing .features .more-link span a strong {display: none;}
.pricing .features .more-link span a i {font-size: 2em; transform: rotate(0deg); transition: all 0.3s;}
.pricing.open .features .more-link span a i {transform: rotate(-180deg);}
.pricing .item.open .features .more-link span a i {transform: rotate(-180deg);}

.pricing .free-account {margin: 0 auto; border: 1px solid #e5e5e5; color: #171c25; border-radius: 0.5em; transition: all 0.3s; overflow: hidden; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; max-width: 48rem;}
.pricing .free-account .features {margin: 0; max-height: 0; width: 100%; transition: all 0.3s;}
.pricing .free-account.open .features {margin: 0 0 1em 0; max-height: 800px;}
.pricing .free-account.open .features ul {max-height: 800px;}
.pricing .free-account .detail h4 {font-size: 1.5em;}
.pricing .free-account .detail p {font-size: 1.2em; font-weight: 400;}
.pricing .free-account .link ul.buttons {margin: 0 0 0 0;}

.pricing .free-account .more-link {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%;}
.pricing .free-account .more-link span {width: 100%;}
.pricing .free-account .more-link span a {padding: 0.5em 0 0 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; flex-grow: 2; color: #5C5C5C; transform: rotate(0deg);}
.pricing .free-account .more-link span a strong {padding: 0 0 0 0.5em; font-size: 0.9em; text-transform: uppercase; font-weight: 600;}
.pricing .free-account .more-link span a i {padding-left: 3px; font-size: 2em; transform: rotate(0deg); transition: all 0.1s;}
.pricing .free-account.open .more-link span a i {transform: rotate(-180deg); }
.pricing .free-account.open .more-link span a { color: #0096F0; }
.pricing .free-account .more-link span a:hover {color: #0096F0;}

.pricing .enterprise {text-align: center;}
.pricing .enterprise h3 {margin-bottom: 10px; font-size: 2em; color: #171c25;}
.pricing .enterprise p {font-size: 1.5em;}
.pricing .enterprise p a {font-weight: 400;}

.pricing .add-info {text-align: center;}
.pricing .add-info span {font-weight: 300;}

.pricing .tabs {margin: 0 auto 2em auto; padding: 3px; width: 280px; border: 1px solid rgba(23,28,37,1); border-radius: 25px; background: #ffffff; box-shadow: 0px 15px 10px -10px rgba(23,28,37,0.3);}
.pricing .tabs ul {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-content: center; color: #171c25; border-radius: 25px; height: 44px; background: #ffffff; overflow: hidden;}
.pricing .tabs ul li {list-style: none; font-weight: 400; display: flex; flex-direction: column; justify-content: center; align-self: center; text-align: center; width: 50%; cursor: pointer; height: 44px; transition: all 0.3s; overflow: hidden;}
.pricing .tabs ul li:hover {background: rgba(23,28,37,0.1);}
.pricing .tabs ul li.current {background: rgba(23,28,37,1); color: #ffffff;}
.pricing .tabs ul li.current:hover {background: rgba(23,28,37,1);}
.pricing .yearly-savings { text-align: center; font-size: 1.1em; font-weight: 300; }

.pricing .tab-content {display: none;}
.pricing .tab-content.current {display: block;}
#pricing-page #faq h3 {padding: 3rem 0 1rem 0;}

@media screen and (max-width: 1050px) {
	.pricing .features {margin: 0 0.5em;}
	.pricing .free-account {width: 100%;}
}

@media screen and (max-width: 1000px) {
	.pricing .listing.col-4 .item {width: calc(1/2*100% - (1 - 1/2)*1em);}

	.pricing .listing .item .price span strong {font-size: 1.7em;}

	.pricing .listing .item .detail p {font-size: 0.9em;}

	.pricing .enterprise {font-size: 90%;}
}

@media screen and (max-width: 800px) {
	.pricing .features ul li {padding: 0 0.5em; font-size: 0.9em;}
	.pricing .features ul li i {font-size: 1em;}

	.pricing .free-account .more-link {margin-bottom: 1em;}
}

@media screen and (max-width: 500px) {
	.pricing .listing.col-4 {flex-direction: column;}
	.pricing .listing.col-4 .item {width: 100%;}

	.pricing .listing .item {margin-top: 0;}
	.pricing .listing .item .option {min-height: auto;}
	.pricing .listing .item .option.highlighted {min-height: auto;}

	.pricing .listing .item .price span strong {font-size: 1.6em;}

	.pricing .features ul li {padding: 0 1em; font-size: 1em;}
	.pricing .features ul li i {font-size: 1.15em;}

	.pricing .features .more-link.desktop {display: none;}
	.pricing .features .more-link.mobile {display: flex;}
}


/* ==========================================================================
   Sign Up
   ========================================================================== */

.signup {position: relative; overflow: hidden; height: 100%;}
.signup::after {content: ""; opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; background-image: url('../img/bg/icon-background-light-row.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}

.signup .wrapper {position: relative; z-index: 1;}


/* ==========================================================================
   Content Area
   ========================================================================== */

.content-area {position: relative; overflow: hidden; height: 100%; z-index: 2;}
.content-area.no-border {padding: 0;}

.content-area .detail {display: flex; flex-direction: column; justify-content: center;}

.content-area .detail.right {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;}
.content-area .detail.left {display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

.content-area .detail.right.one-third .detail-content,
.content-area .detail.left.one-third .detail-content {width: calc(1/3*100% - 5em);}
.content-area .detail.right.one-third .detail-media,
.content-area .detail.left.one-third .detail-media {width: calc(2/3*100%);}

.content-area .detail.right.two-third .detail-content,
.content-area .detail.left.two-third .detail-content {width: calc(2/3*100% - 5em);}
.content-area .detail.right.two-third .detail-media,
.content-area .detail.left.two-third .detail-media {width: calc(1/3*100%);}

.content-area .detail.right.fifty .detail-content,
.content-area .detail.left.fifty .detail-content {width: calc(1/2*100% - 5em);}
.content-area .detail.right.fifty .detail-media,
.content-area .detail.left.fifty .detail-media {width: calc(1/2*100%);}

.content-area .detail .detail-media .video {padding: 0; text-align: center; position: relative; padding-bottom: 56.25%; /* 16:9 */ height: auto; display: block;}
.content-area .detail .detail-media .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; display: block;}
.content-area .detail .detail-media.image {overflow: hidden; }


.content-area.no-border .detail .detail-media .video iframe {border-radius: 0;}
.content-area.no-border .detail figure.detail-media.mb-2 {margin: 0 0 0 0;}
.content-area.no-border .detail div.detail-media.mb-2 {margin: 0 0 0 0;}
.content-area.no-border .detail .detail-media.image {border-radius: 0;}
.content-area.no-border .detail .detail-media.image img {border-radius: 0;}
.content-area.no-border .detail .detail-media.image div {border-radius: 0;}

@media screen and (max-width: 1024px) {
	.content-area .detail.right.one-third .detail-content,
	.content-area .detail.left.one-third .detail-content {width: calc(1/2*100% - 3em);}
	.content-area .detail.right.one-third .detail-media,
	.content-area .detail.left.one-third .detail-media {width: calc(1/2*100%);}

	.content-area .detail.right.two-third .detail-content,
	.content-area .detail.left.two-third .detail-content {width: calc(1/2*100% - 3em);}
	.content-area .detail.right.two-third .detail-media,
	.content-area .detail.left.two-third .detail-media {width: calc(1/2*100%);}

	.content-area .detail.right.fifty .detail-content,
	.content-area .detail.left.fifty .detail-content {width: calc(1/2*100% - 3em);}
	.content-area .detail.right.fifty .detail-media,
	.content-area .detail.left.fifty .detail-media {width: calc(1/2*100%);}

	.content-area .detail .detail-media img.desktop {display: none;}
	.content-area .detail .detail-media div.desktop {display: none;}
}

@media screen and (min-width: 1024px) {
	.content-area .detail .detail-media img.mobile {display: none;}
	.content-area .detail .detail-media img.desktop {display: block;}
	.content-area .detail .detail-media div.desktop {display: none;}
	.content-area .detail.full .detail-media img.desktop {display: none;}
	.content-area .detail.full .detail-media div.desktop {content: ' '; height: 600px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block;}
	.content-area .wrapper.narrow .detail.full .detail-media div.desktop {content: ' '; height: 400px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block;}
	.content-area .wrapper.full .detail.full .detail-media div.desktop {content: ' '; height: 400px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block;}
	.content-area .detail.full .detail-media div.desktop img {display: none;}
}

@media screen and (max-width: 900px) {
	.content-area .detail.right {flex-direction: column-reverse; justify-content: center; }
	.content-area .detail.left {flex-direction: column-reverse; justify-content: center; }

	.content-area .detail.right.one-third .detail-content,
	.content-area .detail.left.one-third .detail-content {width: 100%;}
	.content-area .detail.right.one-third .detail-media,
	.content-area .detail.left.one-third .detail-media {width: 100%;}

	.content-area .detail.right.two-third .detail-content,
	.content-area .detail.left.two-third .detail-content {width: 100%;}
	.content-area .detail.right.two-third .detail-media,
	.content-area .detail.left.two-third .detail-media {width: 100%;}

	.content-area .detail.right.fifty .detail-content,
	.content-area .detail.left.fifty .detail-content {padding-bottom: 2em; width: 100%;}
	.content-area .detail.right.fifty .detail-media,
	.content-area .detail.left.fifty .detail-media {width: 100%;}

	.content-area .detail .detail-content {padding-bottom: 1em;}
}


/* ==========================================================================
   Blog
   ========================================================================== */

.blog {position: relative; overflow: hidden; height: 100%;}
.blog .listing {}
.blog .listing .item {display: flex; flex-direction: column; align-content: stretch; justify-content: space-between; transition: all 0.3s;}
.blog .listing .item a {color: #10141a; font-weight: 600; }
.blog .listing .item:hover h3 a {color: #0096F0;}
.blog .listing .item .image {content: ' '; height: 225px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; border: 1px solid #eee;}
.blog .listing .item .image img {display: none;}
.blog .listing .item .header {padding-bottom: 0.5em;}
.blog .listing .item .header h3 {font-size: 1.5em; line-height: 1.2; padding-bottom: 0.25rem; }
.blog .listing .item .detail .content p {line-height: 1.3; font-size: 1.15em; }
.blog .listing .item .detail .content a p {color: #5C5C5C;}

.blog .listing .item .author {display: flex; flex-direction: row; justify-content: flex-start; align-content: stretch; align-items: center;}
.blog .listing .item .author .author-image {padding: 5px; display: flex; justify-content: center; align-items: center; border-radius: 10%;}
.blog .listing .item .author .author-image figure {min-width: 30px; height: 30px; content: ' '; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; border-radius: 10%;}
.blog .listing .item .author .author-image img {display: none;}
.blog .listing .item .author .author-no-image {display: flex; justify-content: center; align-items: center; border-radius: 10%;}
.blog .listing .item .author .author-no-image i {display: flex; justify-content: center; align-items: center; font-size: 20px; color: #5C5C5C; min-width: 30px; height: 30px; background: #f2f2f2; border-radius: 10%;}
.blog .listing .item .author .info {margin: 0; display: flex; justify-content: space-between; width: 100%; align-items: baseline; }
.blog .listing .item .author span.author-name {color: #10141a; font-weight: 400; font-size: 1.0em; line-height: 1.2; }
.blog .listing .item .author span.author-name::before {content: "By ";}
.blog .listing .item .author span.post-date  {padding-left: 1rem; color: #5C5C5C; font-weight: 300; font-size: 1.0em; line-height: 1.2;}
.blog .listing .item .author span.post-category {display: flex; justify-content: flex-end; flex-grow: 1;}
.blog .listing .item .author span.post-category a {padding: 2px 6px; font-size: 0.8em; border-radius: 3px; font-weight: 400; text-transform: uppercase; transition: all 0.3s;}
.blog .listing .item .author span.post-category.news a {color: #888; border: 1px solid #888;}
.blog .listing .item .author span.post-category.news a:hover {color: #111; background: #eee;}
.blog .listing .item .author span.post-category.articles a {color: #888; border: 1px solid #888;}
.blog .listing .item .author span.post-category.articles a:hover {color: #111; background: #eee;}

.blog .post { max-width: 800px; margin: 0 auto; }
.blog .post .article-header h1 {padding-bottom: 1rem; }
.blog .post .article-header .author {display: flex; flex-direction: row; justify-content: flex-start; align-content: stretch; align-items: center; width: 100%;}
.blog .post .article-header .author .author-image {padding: 5px; display: flex; justify-content: center; align-items: center; border-radius: 10%;}
.blog .post .article-header .author .author-image figure {min-width: 30px; height: 30px; content: ' '; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; border-radius: 10%;}
.blog .post .article-header .author .author-image img {display: none;}
.blog .post .article-header .author .author-no-image {display: flex; justify-content: center; align-items: center; border-radius: 10%;}
.blog .post .article-header .author .author-no-image i {display: flex; justify-content: center; align-items: center; font-size: 20px; color: #5C5C5C; min-width: 50px; height: 50px; background: #f2f2f2; border-radius: 10%;}
.blog .post .article-header .author .info {margin: 0 0 0 0.5rem; display: flex; align-items: baseline; width: 100%; justify-content: space-between; }
.blog .post .article-header .author span.author-name {color:  #10141a; font-weight: 400; font-size: 1em; line-height: 1.2;}
.blog .post .article-header .author span.post-date {padding-left: 1rem; color: #10141a; font-weight: 300; font-size: 1em; line-height: 1.2;}
.blog .post .article-header .author span.post-category {padding-left: 1rem; display: flex; flex-direction: column; align-items: flex-end; flex-grow: 1;}
.blog .post .article-header .author span.post-category a {padding: 2px 6px; font-size: 0.8em; border-radius: 3px; font-weight: 400; text-transform: uppercase; transition: all 0.3s;}
.blog .post .article-header .author span.post-category.news a {color: #888; border: 1px solid #888; }
.blog .post .article-header .author span.post-category.news a:hover {color: #111; background: #eee;}
.blog .post .article-header .author span.post-category.articles a {color: #888; border: 1px solid #888; }
.blog .post .article-header .author span.post-category.articles a:hover {color: #111; background: #eee;}

.blog .post .detail .video {padding: 0; text-align: center; position: relative; padding-bottom: 56.25%; /* 16:9 */ height: auto; display: block;}
.blog .post .detail .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; display: block;}
.blog .post p span.caps {}

.blog .paging {display: flex; justify-content: center; }
.blog .paging ul {margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center }
.blog .paging ul li {list-style: none; margin: 0; padding: 0;}
.blog .paging ul li span {font-size: 1.0em; }
.blog .paging ul li a {padding: 0 1rem; font-size: 1.5em; width: 4rem; }

@media screen and (max-width: 1024px) {

	.blog .post .detail .detail-media.mobile {content: ' '; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block;}
	.blog .post .detail .detail-media.mobile img {display: none;}
	.blog .post .detail .detail-media.desktop img {display: none;}
	.blog .post .detail .detail-media.desktop {display: none;}
}

@media screen and (min-width: 1024px) {
	.blog .post .detail .detail-media.mobile {display: none;}
	.blog .post .detail .detail-media.desktop {content: ' '; height: 400px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block;}
	.blog .post .detail .detail-media.desktop img {display: none;}
}

@media screen and (max-width: 900px) {
	.blog .listing .item .author .info {font-size: 100%;}

	.blog .post .article-header .author .info {font-size: 120%;}
}

@media screen and (max-width: 640px) {
	.blog .post .detail .detail-media.mobile {height: 250px;}

}

@media screen and (max-width: 480px) {
	.blog .post .detail .detail-media.mobile {height: 200px;}

	.blog .listing .item .author .info {font-size: 100%;}

	.blog .post .article-header .author .info {font-size: 130%;}
}


/* ==========================================================================
   Docs
   ========================================================================== */

#docs {}
.docs {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; align-content: flex-start; height: 100%;}

.docs .side-nav {margin-right: 50px; width: 300px; min-width: 300px; border-radius: 0.25em; position: -webkit-sticky; position: sticky; top: 1em;}
.docs .side-nav > ul {margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0px 15px 10px -10px rgba(23,28,37,0.3); max-height: calc(100vh - 300px); overflow-y: scroll; transition: all 0.3s;}
.docs .side-nav.scroll > ul {max-height: calc(100vh - 50px);}
.docs .side-nav ul li {margin: 0; padding: 0; list-style: none;}
.docs .side-nav ul li a {padding: 15px 15px; color: #10141a; font-color: #10141a; font-weight: 600; text-transform: uppercase; display: flex; flex-direction: column;}
.docs .side-nav ul li ul {margin: 0; padding: 0;}
.docs .side-nav ul li ul li a {padding: 10px 30px; color: #10141a; font-color: #10141a; font-weight: 300; text-transform: inherit; transition: all 0.3s; border-radius: 0.25em;}
.docs .side-nav ul li ul li.selected a {color: #0096F0; background: #f2f2f2; font-weight: 400;}
.docs .side-nav ul li ul li a:hover {background: #f5f5f5;}

/*
.docs .side-nav {margin-right: 50px; display: flex; flex-direction: column; width: 300px; min-width: 300px; border-radius: 0.25em; border: 1px solid #F2F2F2;}
.docs .side-nav > ul {margin: 0; padding: 0; display: flex; flex-direction: column; background: #F2F2F2; border-radius: 0.25em; overflow: hidden; box-shadow: 0px 15px 10px -10px rgba(23,28,37,0.3);}
.docs .side-nav ul li {margin: 0; padding: 0; list-style: none;}
.docs .side-nav ul li a {padding: 15px 15px; color: #10141a; font-color: #10141a; font-weight: 600; text-transform: uppercase; display: flex; flex-direction: column;}
.docs .side-nav ul li ul {margin: 0; padding: 0; background: #f2f2f2;}
.docs .side-nav ul li ul li a {padding: 10px 15px; color: #10141a; font-color: #10141a; font-weight: 300; text-transform: inherit; transition: all 0.3s;}
.docs .side-nav ul li ul li:nth-child(even) {background: #fafafa;}
.docs .side-nav ul li ul li.selected a {color: #0096F0; background: #ffffff; font-weight: 400;}
.docs .side-nav ul li ul li a:hover {background: #ffffff;}
*/

.docs .detail {display: flex; flex-direction: column; flex-grow: 2; min-width: 0;}
.docs .detail .content-header {padding-bottom: 1em; border-bottom: 1px solid #f2f2f2;}

.docs .detail .docs-nav-home {margin: 1em 0;}
.docs .detail .docs-nav-home ul {margin: 0; padding: 0;}
.docs .detail .docs-nav-home ul li {list-style: none; padding: 0 0 0.5em 0; text-transform: uppercase;}
.docs .detail .docs-nav-home ul li:last-child {padding: 0 0 0 0;}
.docs .detail .docs-nav-home ul li a {margin: 0; padding: 10px 0; list-style: none; font-size: 1.3em; font-weight: 600; color: #10141a; color: rgba(16,20,26,1); line-height: 1.3; text-align: left; letter-spacing: 0.025em; display: flex; flex-direction: row;}
.docs .detail .docs-nav-home ul li ul li a {padding: 5px 0; font-weight: 300; text-transform: capitalize;}
.docs .detail .docs-nav-home ul li a:hover {color: rgba(16,20,26,0.5);}

.docs .detail .docs-nav {margin: 2em 0;}
.docs .detail .docs-nav ul {margin: 1em 0; padding: 0 0 0 1em;}
.docs .detail .docs-nav ul li {list-style: none; padding:  0 0 0.5em 0;}
.docs .detail .docs-nav ul li:last-child {padding: 0 0 0 0;}
.docs .detail .docs-nav ul li a {margin: 0; list-style: none; font-size: 1.3em; font-weight: 300; color: #10141a; color: rgba(16,20,26,1); line-height: 1.3; text-align: left; letter-spacing: 0.025em; display: flex; flex-direction: row;}
.docs .detail .docs-nav ul li a::before {padding: 4px 1em 0 0; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 600; color: #10141a; color: rgba(16,20,26,1); font-size: 0.75em; display: flex; align-self: flex-start; transition: all 0.3s;}
.docs .detail .docs-nav ul li a:hover {color: rgba(16,20,26,0.5);}
.docs .detail .docs-nav ul li a:hover::before {padding: 4px 1em 0 0; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 600; color: #10141a; color: rgba(16,20,26,0.5); font-size: 0.75em; display: flex; align-self: flex-start;}

.docs .detail .image {margin: 2em 0;}

.docs .detail .video {margin: 2em; text-align: center; position: relative; padding-bottom: 56.25%; /* 16:9 */ height: auto; display: block;}
.docs .detail .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; display: block;}

.docs .detail section {border-top: 3px solid #f2f2f2;}


@media screen and (max-width: 1200px) {
	.docs .side-nav {width: 250px; min-width: 250px;}
}

@media screen and (max-width: 1024px) {
	.docs .side-nav {display: none;}
	.docs .detail .docs-nav {margin: 0 0 0.5em 0;}
}

@media screen and (max-width: 900px) {
	.docs .content-header {width: 100%;}
	.docs .detail .docs-nav {font-size: 90%;}
	.docs .detail .docs-nav-home {font-size: 90%;}
	.docs .detail .video {margin: 2em 0;}
}



/* ==========================================================================
   Columns
   ========================================================================== */
    box-shadow:

.columns {color: #171c25;}
.columns.blue .section-header,
.columns.deepblue .section-header {color: #ffffff;}
.columns .item {background: #ffffff; position: relative;}
.columns .item::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-background-dark-narrow.svg'); background-size: cover; background-repeat: no-repeat; background-position: bottom left;}
.columns .item {margin-bottom: 0; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s; justify-content: space-between; overflow: hidden; position: relative; z-index: 2; color: #171c25;}
.columns .listing .item:hover {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }
.columns .item {margin-bottom: 2em;}

.columns .listing .item .item-media {overflow: hidden;}
.columns .listing .item .item-media figure.image {content: ' '; height: 250px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; transition: all 0.3s linear;}
.columns .listing .item .item-media figure.image img {display: none;}

.columns .listing .item .item-media {display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start;}
.columns .listing .item .item-media figure.icon img {height: 100px; max-height: 100px; width: auto;}


@media screen and (max-width: 1024px) {
	.columns .listing .item .item-media figure.image {height: 150px;}
}

@media screen and (max-width: 760px) {
}

@media screen and (max-width: 640px) {
	.columns .item {margin-bottom: 2em;}
	.columns .item:last-child {margin-bottom: 0;}
}




/* ==========================================================================
   Content
   ========================================================================== */

.content { width: 100%;}
.content h1 {line-height: 1.3; font-size: 2em; padding: 2rem 0 1rem 0; }
.content h2 {margin: 0; padding: 1em 0 0.5em 0; font-size: 1.5em; padding: 1rem 0 1rem 0; font-weight: 600; }
.content img {margin: 1.5em 0; padding: 0; width: 100%; border: 1px solid #ddd; /* box-shadow: 0 0 5px rgba(0,0,0,.4); */ }
.content p {margin: 0; padding: 0.5em 0;  text-align: left;}
.content strong, b {font-weight: 500;}
.content strong span {font-weight: 700;}

.content blockquote {margin: 1.5rem 0 0 0; display: flex; flex-direction: column; }
.content blockquote::before { content: ""; display: block; height: 50px; width: 50px; background-size: 38px 49px; background-image: url('../img/pull-quote-primary.svg'); background-repeat: no-repeat; padding-bottom: 1rem; }

.content blockquote p {margin: 0; padding: 0 0 0 1em; font-size: 1.5em; line-height: 1.3;}
.content blockquote p br {margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; display: block;}
.content blockquote p em {color: #ED6B06; font-size: 0.75em; font-weight: 300; font-style: normal;}

.content-callout {margin: 0 0 2em 0;}
.content-callout p span {margin: 0; padding: 0.25em 0 0 0; line-height: 1.4; font-size: 1.25em; font-weight: 600; }

.columns .content p {margin: 0; padding: 0 0 0.75em 0; line-height: 1.4; font-size: 1em;}


/*
.docs .content h2 {margin: 0; padding: 0.5em 0 0.5em 0; line-height: 1.2; font-size: 2.5em;}
.docs .content h3 {margin: 0; padding: 0.25em 0 0.25em 0; line-height: 1.2; font-size: 1.75em;}
.docs .content h4 {margin: 0; padding: 0.25em 0 0.25em 0; line-height: 1.2; font-size: 1.6em;}
.docs .content h5 {margin: 0; padding: 0.25em 0 0.25em 0; line-height: 1.2; font-size: 1.4em;}
.docs .content h6 {margin: 0; padding: 0.25em 0 0.25em 0; line-height: 1.2; font-size: 1.3em;}*/
.docs-content .content blockquote {margin: 2em; padding: 2em; background: #f2f2f2; border-left: 5px solid rgba(0,150,240,1); display: flex; flex-direction: row; box-shadow: 0px 15px 10px -10px rgba(23,28,37,0.3);}
.docs-content .content blockquote::before {display: none;}
.docs-content .content blockquote p {margin: 0; padding: 0; font-size: 1.5em; line-height: 1.2;}
.docs-content .content blockquote p br {margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; display: block;}
.docs-content .content blockquote p em {color: #ED6B06; font-size: 0.75em; font-weight: 300; font-style: normal;}


@media screen and (max-width: 1024px) {
	.content {text-align: left;}
	.columns .content p {font-size: 1.2em;}
	.content {font-size: 90%;}
	.content-callout {font-size: 90%;}
}

@media screen and (max-width: 640px) {
	.content {font-size: 80%;}
	.content-callout {font-size: 80%;}
}


/* ==========================================================================
   Contact
   ========================================================================== */

/* ==========================================================================
   Forms
   ========================================================================== */

.contact-form {margin: 0 0 0 0; padding: 0; text-align: left; width: 100%;}
.contact-form a {text-decoration: underline; font-weight: 300;}
.contact-form .section-header a {text-decoration: none; font-weight: 500;}
.contact-form .contact-form-section {margin: 0 0 3em 0; border-bottom: 3px solid #343A40;}
.contact-form .contact-form-section:last-of-type {margin: 0 0 0 0; border-bottom: none;}
.contact-form .contact-form-section .marketing {margin: 0 0 2em 0; background: #f5f5f5; box-shadow: 5px 5px 0 0px rgba(33, 37, 41,0.2); -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .contact-form-section .marketing:hover {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .contact-form-section .form-header {margin: 0 0 2em 0;}
.contact-form .contact-form-section .form-header h4 {margin: 0; font-size: 1.5em;}
.contact-form .contact-form-section .form-header p {margin: 0; font-size: 1.2em; font-weight: 300;}
.contact-form .contact-form-section .fields {margin: 0; display: flex; flex-direction: column; width: 100%; justify-content: space-between}
.contact-form .contact-form-section .fields.two,
.contact-form .contact-form-section .fields.three {margin: 0; display: flex; flex-direction: row; width: 100%; justify-content: space-between;}
.contact-form .contact-form-section .fields.two .column {display: flex; flex-direction: column; width: calc(1/2*100% - (1 - 1/2)*2em);}
.contact-form .contact-form-section .fields.three .column {display: flex; flex-direction: column; width: calc(1/3*100% - (1 - 1/3)*2em);}
.contact-form .contact-form-section .fields h5 {margin: 0 0 15px 0; font-size: 1.25em;}
.contact-form .contact-form-section .marketing .fields {flex-direction: column;}

.contact-form label i {padding: 0; color: #212529; font-size: 0.9em; font-weight: 300; font-style: normal;}

.contact-form .input {position: relative;}
.contact-form .input label {position: absolute; padding: 0; color: rgba(33,37,41,0.5); display: block; font-size: 1em; line-height: 1; top: 10px; left: 10px; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .input input {margin: 0 0 25px 0; padding: 25px 10px 10px 10px; height: 80px; width: 100%; border-radius: 0; border: none; display: block; line-height: 1; font-size: 1em; color: #212529; background: #f5f5f5; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; box-sizing: border-box; box-shadow: 5px 5px 0 0px rgba(33, 37, 41,0.2);}
.contact-form .input input::-webkit-input-placeholder,
.contact-form .input input::-moz-placeholder,
.contact-form .input input::placeholder-shown {color:#ffffff;}
.contact-form .input.address {display: none;}
.contact-form .input input:hover {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .input input:focus {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .input:hover label {color: rgba(33,37,41,1);}
.contact-form .input:focus-within label {color: rgba(33,37,41,1);}

.contact-form .select {position: relative;}
.contact-form .select label {padding: 0; color: rgba(33,37,41,0.5); display: block; font-size: 1em; line-height: 1; position: absolute; top: 10px; left: 10px; z-index: 2; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .select label i {padding: 0; color: #212529; font-size: 0.9em;}
.contact-form .select .dropdown {margin: 0 0 25px 0; position: relative; background: #f5f5f5; overflow: hidden; border: none; border: none; border-radius: 0; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; box-shadow: 5px 5px 0 0px rgba(33, 37, 41,0.2); box-sizing: border-box;}
.contact-form .select .dropdown:after {content: '\f078'; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1.5em; font-weight: 900; height: 80px; line-height: 80px; text-rendering: auto; width: 1em; -webkit-font-smoothing: antialiased; position: absolute; right: 1em; top: 5px; z-index: 1; pointer-events: none; color: #212529;}
.contact-form .select select {margin: 0; padding: 15px 10px 0 10px; height: 80px; width: 100%; border: none; display: block; font-size: 1.15em; color: #212529; background: transparent; box-shadow: none; background-image: none; -webkit-appearance: none; line-height: 1.2; box-sizing: border-box;}
.contact-form .select .dropdown:hover {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .select .dropdown:focus {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .select:hover label {color: rgba(33,37,41,1);}
.contact-form .select:focus-within label {color: rgba(33,37,41,1);}

.contact-form .textarea {position: relative;}
.contact-form .textarea label {padding: 10px 10px 10px 10px; color: rgba(33,37,41,0.5); display: block; font-size: 1em; position: absolute; top: 0; left: 0; z-index: 2; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; background: #f5f5f5; min-height: 40px; box-sizing: border-box; width: 100%;}
.contact-form .textarea textarea {margin: 0; padding: 40px 10px 10px 10px; width: 100%; border: none; border: none; display: block; font-size: 1em; color: #212529; background: #f5f5f5; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; border-radius: 0; height: 250px; position: relative; z-index: 1; box-shadow: 5px 5px 0 0px rgba(33, 37, 41,0.2); box-sizing: border-box;}
.contact-form .textarea textarea:hover {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .textarea textarea:focus {box-shadow: 5px 5px 0 0px rgba(7,191,188,1);}
.contact-form .textarea:hover label,
.contact-form .textarea:focus-within label {color: rgba(33,37,41,1);}

.contact-form .marketing .fields .checkbox {margin: 0 0 10px 0; display: flex; position: relative; padding-left: 60px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-height: 40px; box-sizing: border-box;}
.contact-form .marketing .fields .checkbox input {position: absolute; opacity: 0; cursor: pointer; height: 40px; width: 40px; left: 0; z-index: 10; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .marketing .fields .checkbox label {padding: 0; color: #212529; cursor: pointer; font-weight: 300; font-size: 1.2em; display: block; align-self: center; text-transform: inherit;}
.contact-form .marketing .fields .checkbox .checkmark {position: absolute; top: 0; left: 0; height: 40px; width: 40px; background-color: #e5e5e5; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .marketing .fields .checkbox:hover input ~ .checkmark {background-color: #d5d5d5;}
.contact-form .marketing .fields .checkbox input:checked ~ .checkmark {background-color: #212529;}
.contact-form .marketing .fields .checkbox .checkmark:after {content: ""; position: absolute; display: none;}
.contact-form .marketing .fields .checkbox input:checked ~ .checkmark:after {display: block;}
.contact-form .marketing .fields .checkbox .checkmark:after {left: 14px; top: 6px; width: 9px; height: 18px; border: solid white; border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.contact-form .fields.three .checkbox {margin: 0 0 10px 0; display: flex; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-height: 40px; background: #f5f5f5;}
.contact-form .fields.three .checkbox input {position: absolute; opacity: 0; cursor: pointer; height: 40px; width: 40px; left: 10px; z-index: 10; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .fields.three .checkbox label {padding: 10px 20px 10px 70px; color: rgba(33,37,41,1); cursor: pointer; font-weight: 300; font-size: 1.2em; display: flex; align-self: center; align-items: center; text-transform: inherit; width: 100%; min-height: 40px;  -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .fields.three .checkbox .checkmark {position: absolute; top: 10px; left: 10px; height: 40px; width: 40px; background-color: #e5e5e5; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contact-form .fields.three .checkbox:hover input ~ .checkmark {background-color: #d5d5d5;}
.contact-form .fields.three .checkbox input:checked ~ .checkmark {background-color: #212529;}
.contact-form .fields.three .checkbox .checkmark:after {content: ""; position: absolute; display: none;}
.contact-form .fields.three .checkbox input:checked ~ .checkmark:after {display: block;}
.contact-form .fields.three .checkbox .checkmark:after {left: 14px; top: 6px; width: 9px; height: 18px; border: solid white; border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.contact-form .fields.three .checkbox:hover label {color: rgba(33,37,41,0.5);}
.contact-form .fields.three .checkbox:focus-within label {color: rgba(33,37,41,1);}

.contact-form .details {margin: 0 0 2em 0;}
.contact-form .submit input {margin: 0 0 0 0; padding: 0 1.5em 0 1.5em; min-height: 80px; border-radius: 5px; color: #ffffff; background: rgb(0,221,233); background: rgba(7,191,188,1); text-transform: uppercase; font-size: 1.2em; letter-spacing: 0.1em; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; border: none; cursor: pointer; width: 100%; box-sizing: border-box;}
.contact-form .submit input:hover {background: rgba(7,191,188,0.8);}
.contact-form .submit input:focus {background: rgba(7,191,188,0.8);}

input:focus,
select:focus,
textarea:focus,
button:focus {outline: none;}

@media screen and (max-width: 1200px) {
	.contact-form .contact-form-section .fields.three {flex-direction: column;}
	.contact-form .contact-form-section .fields.three .column {margin-bottom: 2em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%;}
	.contact-form .contact-form-section .fields.three h5 {width: 100%;}
	.contact-form .contact-form-section .fields.three .checkbox {flex-direction: row; width: calc(1/2*100% - (1 - 1/2)*2em);}
}

@media screen and (max-width: 1000px) {
	.contact-form .contact-form-section .fields.two {flex-direction: column; flex-wrap: wrap;}
	.contact-form .contact-form-section .fields.two .column {width: 100%;}
}

@media screen and (max-width: 640px) {
	.contact-form .contact-form-section {margin-bottom: 2em;}
	.contact-form .contact-form-section .fields.three .checkbox {width: 100%;}
	.contact-form .contact-form-section .form-header {font-size: 80%;}
	.contact-form .marketing {font-size: 80%;}
	.contact-form .contact-form-section .fields h5 {font-size: 90%;}
	.contact-form .contact-form-section .fields .checkbox label {font-size: 90%;}
	.contact-form .contact-form-section .fields.three .column {margin-bottom: 1em;}
}


/* ==========================================================================
   Footer
   ========================================================================== */

.footer {position: relative; overflow: hidden; height: 100%;}
.footer::after {content: ""; opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-image: url('../img/bg/icon-background-light-narrow.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}

.footer h3 {margin-bottom: 0.75em; padding: 0; }
.footer p {margin-bottom: 0.5em; font-size: 1.15em; color: #ccc; }

.footer .detail {position: relative; overflow: hidden; height: 100%;}
.footer .detail .wrapper {z-index: 1; position: relative;}

.footer .detail .address {margin: 0; padding: 0; display: flex; flex-direction: column; flex-wrap: wrap;}
.footer .detail .address h4 {margin: 0; padding: 0 0.5em 0 0; color: #ffffff; font-weight: 500; font-size: 1.25em}
.footer .detail .address span {margin: 0; padding: 0 0 0.25em 0; color: #ccc; font-size: 1.05em}

.footer .detail .container {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
.footer .detail .container .contact {width: 20%; flex-grow: 1;}

.footer .detail .contact ul {margin-top: 0.5em; padding: 0;}
.footer .detail .contact ul li {margin: 1em 0 1.5em 0; padding: 0; list-style: none; font-size: 1.05em;}
.footer .detail .contact ul li a {color: #ccc; line-height: 1.75; display: flex; flex-direction: column;}
.footer .detail .contact ul li a:hover {color: #fff;}
.footer .detail .contact ul li a::after {content: ''; height: 2px; width: 0; transition: 0.3s ease-in-out; background: rgb(0,150,240);}
.footer .detail .contact ul li a:hover::after {width: 40px;}
.footer .detail .contact ul li.tel,
.footer .detail .contact ul li.mobile a {color: #ccc;}
.footer .detail .contact ul li.tel,
.footer .detail .contact ul li.mobile a:hover {color: #fff;}

.footer .detail .social ul {margin: 1em 0; padding: 0; display: flex; flex-direction: row;}
.footer .detail .social ul li {margin: 0 0.5em 0 0; padding: 0; list-style: none; font-size: 2em;}
.footer .detail .social ul li a {color: #ccc; display: flex; flex-direction: column; align-items: center;}
.footer .detail .social ul li a:hover {color: #fff;}
.footer .detail .social ul li a::after {margin: 0.25em 0 0 0; content: ''; height: 2px; width: 0; transition: 0.3s ease-in-out; background: rgb(0,150,240);}
.footer .detail .social ul li a:hover::after {width: 20px;}

.footer .footer-nav {display: flex; flex-direction: row; width: 80%; justify-content: flex-start; align-content: stretch; flex-wrap: wrap; margin-bottom: 1rem; }
.footer .footer-nav .item {display: flex; flex-direction: column; width: calc(1/3*100% - (1 - 1/3)*2em);}
/*
 UN-COMMENT THIS OUT AGAIN WHEN WE RE-ADD THE SUPPORT SECTION
 .footer .footer-nav .item {display: flex; flex-direction: column; width: calc(1/4*100% - (1 - 1/4)*2em);}
*/
.footer .footer-nav .item ul {margin: 0 0 1.5em 0; padding: 0;}
.footer .footer-nav .item ul li {margin: 0 0 0.4em 0; padding: 0; list-style: none; font-size: 1.05em; }
.footer .footer-nav .item ul li a {color: #ccc; line-height: 1.75; display: flex; flex-direction: column; }
.footer .footer-nav .item ul li a:hover {color: white;}
.footer .footer-nav .item ul li a::after {content: ''; height: 2px; width: 0; transition: 0.3s ease-in-out; background: rgb(0,150,240);}
.footer .footer-nav .item ul li a:hover::after {width: 40px;}
.footer .footer-nav .item ul li.selected a::after {width: 40px;}
.footer .footer-nav .item ul li.tel,
.footer .footer-nav .item ul li.mobile a {color: #ccc;}
.footer .footer-nav .item ul li.tel,
.footer .footer-nav .item ul li.mobile a:hover {color: #fff;}


.footer .copyright {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.footer .copyright small {color: #ffffff; font-size: 1em;}
.footer .copyright ul {margin: 0; padding: 0; display: flex; flex-direction: row;}
.footer .copyright ul li {margin-left: 2em; padding: 0; list-style: none; font-size: 1em; text-transform: uppercase;}
.footer .copyright ul li a {padding: 0; color: #ccc; text-decoration: none; display: flex; flex-direction: column; align-items: center; transition: 0.3s ease-in-out; line-height: 2;}
.footer .copyright ul li a:hover {color: #fff;}
.footer .copyright ul li a::after {content: ''; height: 2px; width: 0; transition: 0.3s ease-in-out; background: rgb(0,150,240);}
.footer .copyright ul li a:hover::after {width: 40px;}
.footer .copyright ul li:last-child {margin-right: 0;}

.footer .copyright .container {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}

@media screen and (orientation: portrait) {
	.footer .detail::after {background-size: cover;}
}

@media screen and (max-width: 1400px) {
	.footer .detail .container {flex-wrap: wrap;}

	.footer .footer-nav {width: 70%;}
	.footer .footer-nav .item {width: calc(1/2*100% - (1 - 1/2)*2em);}

	.footer .detail .container .contact {width: 30%; flex-grow: 1;}
}

@media screen and (max-width: 900px) {
	.footer .copyright .container {padding: 1em 0; flex-direction: column-reverse; justify-content: center; align-items: flex-start}
	.footer .copyright ul li {margin: 0 1em 0 0;}
	.footer .copyright small {width: 90%;}

	.footer .detail h4,
	.footer .detail .address span,
	.footer .detail .contact ul li,
	.footer .copyright small,
	.footer .copyright ul li {font-weight: 300;}

	.footer .detail .container .contact {width: 100%; flex-grow: 1;}

	.footer .footer-nav {width: 100%;}
}

@media screen and (max-width: 640px) {
	.footer .detail .container {width: 100%; margin: 0; }
	.footer .detail .container .contact {width: 100%; text-align: center; }
	.footer .footer-nav .item {width: 50%;}
	.footer .detail .social ul {justify-content: center; margin-top: 2rem;}
}

/* ==========================================================================
   AOS Animations
   ========================================================================== */

@media screen and (max-width: 900px) {
  [data-aos-delay] {
    transition-delay: 0s !important;
  }
}

/* Custom large animations which works well on this section */
[data-aos=fade-left-large] { transform: translate3d(1000px,0,0); }
[data-aos=fade-right-large] { transform: translate3d(-1000px,0,0); }

/* ==========================================================================
   Back to top button
   ========================================================================== */

#back-top a {padding: 0; position: fixed; right: -62px; bottom: 10px; color: #ffffff; z-index: 300; width: 62px; height: 62px; line-height: 62px; display: block; background: rgba(16,20,26,1); border-radius: 31px; text-transform: uppercase; text-align: center; font-size: 2.5em; opacity: 0; z-index: 9000;}
#back-top a:hover {color: #ffffff; background: rgba(16,20,26,1);}

body.reveal #back-top a {right: 10px; opacity: 1;}